JavaScript-在当前显示区范围内实现点不到的小方块

 1 <!doctype html>
 2 <html>
 3  <head>
 4     <meta charset="UTF-8">
 5     <title>在当前显示区范围内实现点不到的小方块</title>
 6     <style>
 7         div{position:fixed;width:50px;height:50px;
 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
42         }
43         game.init();
44     </script>
45
46  </body>
47 </html>

转载于:https://www.cnblogs.com/longly/p/6243754.html

JavaScript-在当前显示区范围内实现点不到的小方块相关推荐

百度地图高级实例2-如何利用自己的数据制作社交地图？只显示可视区域内的标注
摘要:如果你自己的数据已经超过1万个,如何进行合理的显示?除了聚合marker外,还有一个办法.那就是,只显示可视区域内的标注. ----------------------------------- ...
如何利用自己的数据制作社交地图？只显示可视区域内的标注
地址:http://www.cnblogs.com/milkmap/archive/2012/02/02/2335989.html [百度地图API]如何利用自己的数据制作社交地图?只显示可视区域内的 ...
【百度地图API】如何利用自己的数据制作社交地图？只显示可视区域内的标注...
原文:[百度地图API]如何利用自己的数据制作社交地图?只显示可视区域内的标注摘要:如果你自己的数据已经超过1万个,如何进行合理的显示?除了聚合marker外,还有一个办法.那就是,只显示可视区域内 ...
【百度地图API】如何利用自己的数据制作社交地图？只显示可视区域内的标注
[百度地图API]如何利用自己的数据制作社交地图?只显示可视区域内的标注摘要:如果你自己的数据已经超过1万个,如何进行合理的显示?除了聚合marker外,还有一个办法.那就是,只显示可视区域内的标注 ...
javascript怎么隐藏显示div
设置方法:1.使用style对象的display属性,值为"none"可隐藏div元素,值为"block"可显示元素:2.使用style对象的visibilit ...
Element el-switch 组件样式修改将文字显示到组件内
Element el-switch 现在的样式无法将文字显示到组件内 ,需要自己修改样式.具体如下 <el-switch:disabled="s==item.select.length ...
使用ISA Server 2006的DMZ区保护内网的服务器群
使用ISA Server 2006的DMZ区保护内网的服务器群在大多数单位中,网络中的所有服务器通常接在核心交换机上,工作站通过接入层交换机接到核心交换机,服务器与工作站划分在不同的VLAN中,如图 ...
android 应用区高度,Android创建显示区高度可以调整的ScrollView
导言:我们在用到ScrollView时,有时候需要它的显示区高度可以调整,比如一段话放到ScrollView中,当这段话只有一行时,我们设置ScrollView的高度为20:有两行时,我们设置Scro ...
用javascript来完成显示和隐藏的案例
显示和隐藏开发工具与关键技术:DW javascript 作者:沈金凤年级:18级(5)班撰写日期:2019年2月7日用javaScript来完成显示和隐藏首先要编写好html和css样式,再 ...

JavaScript-在当前显示区范围内实现点不到的小方块

JavaScript-在当前显示区范围内实现点不到的小方块相关推荐

最新文章

热门文章