Home > Developer > JavaScript
1<!doctype html>234<meta charset= "UTF-8" >5<title> implement small squares that are not visible within the current display area </title>6<style>7 div{position:fixed;width:500px;height:500px;8background-Color:pink;9 }Ten</style> One A -<body> -<div id= "Pop" ></div> the<script> - varGame={ -psize:0,//Save the size of the DIV -maxtop:0,//Save Maximum can top +maxleft:0,//Save maximum available left -PopNULL,//Save protagonist Div +Init:function(){ A //find a div with a pop id stored in the pop attribute at This. Pop=document.getelementbyid ("Pop"); - //gets the width of the pop computed style, and the floating-point number is saved in the Psize property - This. Psize=parsefloat (getComputedStyle ( This. Pop). width); - //calculate maxtop: High-psize of the document display area - This. maxtop=innerheight- This. PSIZE; - //calculate Maxleft: Width-psize of the document display area in This. maxleft=innerwidth- This. PSIZE; - //Debugger; to Debugger; + //generates a random number between 0-maxtop and is stored in the variable rtop - varRtop=math.floor (Math.random () * ( This. Maxtop+1)); the //generates a random number between 0-maxleft and is stored in the variable rleft * varRleft=math.floor (Math.random () * ( This. Maxleft+1)); $ //set the top of the pop to RtopPanax Notoginseng This. pop.style.top=rtop+ "px"; - //set the left of the pop to Rleft the This. pop.style.left=rleft+ "px"; + A //to bind the mouse into the event listener for pop, the function is the This. Pop.addeventlistener ("MouseOver", + function(e) {//get Time Object e - //repeated execution $ while(true){ $ //generates a random number between 0-maxtop and is stored in the variable rtop - varRtop=math.floor (Math.random () * ( This. Maxtop+1)); - //generates a random number between 0-maxleft and is stored in the variable rleft the varRleft=math.floor (Math.random () * ( This. Maxleft+1)); - //gets the x-coordinate of the mouse relative to the document display areaWuyi varx=E.clientx; the //Gets the y-coordinate of the mouse relative to the document display area - vary=E.clienty; Wu //if! (X>=rleft&&x<rleft+psize - //&&y>=rtop&&y<=rtop+psize) About if(! (x>=rleft&&x<rleft+ This. psize&&y>=rtop&&y<=rtop+ This. PSIZE)) { $ //If the new location does not contain a mouse position - //set the top of the pop to Rtop - This. pop.style.top=rtop+ "px"; - //set the left of the pop to Rleft A This. pop.style.left=rleft+ "px"; + //Exit Sequential the Break; - } $ } the}.bind ( This) the ); the } the - } in game.init (); the</script> the About</body> thejavascript-a small window never to be reached.
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
