<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>在当前显示区范围内实现点不到的小方块</title>
<style>
div{position:fixed;width:50px;height:50px;
background-color:pink;
}
</style> </head>
<body>
<div id="pop"></div>
<script>
var game={
PSIZE:0,//保存div的大小
MAXTOP:0,//保存最大可以top
MAXLEFT:0,//保存最大可用left
pop:null,//保存主角div
init:function(){
//查找id为pop的div保存在pop属性中
this.pop=document.getElementById("pop");
//获取pop计算后的样式中的width,转为浮点数保存在PSIZE属性中
this.PSIZE=parseFloat(getComputedStyle(this.pop).width);
//计算MAXTOP:文档显示区的高-PSIZE
this.MAXTOP=innerHeight-this.PSIZE;
//计算MAXLEFT:文档显示区的宽-PSIZE
this.MAXLEFT=innerWidth-this.PSIZE;
//debugger;
debugger;
//在0-MAXTOP之间生成随机数,保存在变量rTop中
var rTop=Math.floor(Math.random()*(this.MAXTOP+1));
//在0-MAXLEFT之间生成随机数,保存在变量rLeft中
var rLeft=Math.floor(Math.random()*(this.MAXLEFT+1));
//设置pop的top为rTop
this.pop.style.top=rTop+"px";
//设置pop的left为rLeft
this.pop.style.left=rLeft+"px";
} }
game.init();
</script> </body>
</html>