首页 > 代码库 > JavaScript-永远点不到的小窗口

JavaScript-永远点不到的小窗口

2024-08-30 14:42:40   219人阅读

 1 <!doctype html>
 2 <html>
 3  <head>
 4     <meta charset="UTF-8">
 5     <title>在当前显示区范围内实现点不到的小方块</title>
 6     <style>
 7         div{position:fixed;width:500px;height:500px;
 8             background-color:pink;
 9         }
10     </style>
11 
12  </head>
13  <body>
14  <div id="pop"></div>
15     <script>
16         var game={
17             PSIZE:0,//保存div的大小
18             MAXTOP:0,//保存最大可以top
19             MAXLEFT:0,//保存最大可用left
20             pop:null,//保存主角div
21             init:function(){
22                 //查找id为pop的div保存在pop属性中
23                 this.pop=document.getElementById("pop");
24                 //获取pop计算后的样式中的width,转为浮点数保存在PSIZE属性中
25                 this.PSIZE=parseFloat(getComputedStyle(this.pop).width);
26                 //计算MAXTOP:文档显示区的高-PSIZE
27                 this.MAXTOP=innerHeight-this.PSIZE;
28                 //计算MAXLEFT:文档显示区的宽-PSIZE
29                 this.MAXLEFT=innerWidth-this.PSIZE;
30                 //debugger;
31                 debugger;
32                 //在0-MAXTOP之间生成随机数,保存在变量rTop中
33                 var rTop=Math.floor(Math.random()*(this.MAXTOP+1));
34                 //在0-MAXLEFT之间生成随机数,保存在变量rLeft中
35                 var rLeft=Math.floor(Math.random()*(this.MAXLEFT+1));
36                 //设置pop的top为rTop
37                 this.pop.style.top=rTop+"px";
38                 //设置pop的left为rLeft
39                 this.pop.style.left=rLeft+"px";
40 
41                 //为pop绑定鼠标进入事件监听,函数为
42                 this.pop.addEventListener("mouseover",
43                     function(e){//获得时间对象e
44                         //反复执行
45                         while(true){
46                         //在0-MAXTOP之间生成随机数,保存在变量rTop中
47                         var rTop=Math.floor(Math.random()*(this.MAXTOP+1));
48                         //在0-MAXLEFT之间生成随机数,保存在变量rLeft中
49                         var rLeft=Math.floor(Math.random()*(this.MAXLEFT+1));
50                         //获得鼠标相对于文档显示区的x坐标
51                         var x= e.clientX;
52                         //获得鼠标相对于文档显示区的y坐标
53                         var y= e.clientY;
54                         //如果!(x>=rLeft&&x<rLeft+PSIZE
55                         // &&y>=rTop&&y<=rTop+PSIZE)
56                         if(!(x>=rLeft&&x<rLeft+this.PSIZE&&y>=rTop&&y<=rTop+this.PSIZE)){
57                         //如果新位置不包含鼠标位置
58                         //设置pop的top为rTop
59                         this.pop.style.top=rTop+"px";
60                         //设置pop的left为rLeft
61                         this.pop.style.left=rLeft+"px";
62                         //退出循序
63                         break;
64                           }
65                         }
66                     }.bind(this)
67                 );
68             }
69 
70         }
71         game.init();
72     </script>
73 
74  </body>
75 </html>

 

JavaScript-永远点不到的小窗口


联系
我们