<!doctype html>

 <html>

  <head>

     <meta charset="UTF-8">

     <title>在当前显示区范围内实现点不到的小方块</title>

     <style>

         div{position:fixed;width:500px;height:500px;

             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";

                 //为pop绑定鼠标进入事件监听,函数为

                 this.pop.addEventListener("mouseover",

                     function(e){//获得时间对象e

                         //反复执行

                         while(true){

                         //在0-MAXTOP之间生成随机数,保存在变量rTop中

                         var rTop=Math.floor(Math.random()*(this.MAXTOP+1));

                         //在0-MAXLEFT之间生成随机数,保存在变量rLeft中

                         var rLeft=Math.floor(Math.random()*(this.MAXLEFT+1));

                         //获得鼠标相对于文档显示区的x坐标

                         var x= e.clientX;

                         //获得鼠标相对于文档显示区的y坐标

                         var y= e.clientY;

                         //如果!(x>=rLeft&&x<rLeft+PSIZE

                         // &&y>=rTop&&y<=rTop+PSIZE)

                         if(!(x>=rLeft&&x<rLeft+this.PSIZE&&y>=rTop&&y<=rTop+this.PSIZE)){

                         //如果新位置不包含鼠标位置

                         //设置pop的top为rTop

                         this.pop.style.top=rTop+"px";

                         //设置pop的left为rLeft

                         this.pop.style.left=rLeft+"px";

                         //退出循序

                         break;

                           }

                         }

                     }.bind(this)

                 );

             }

         }

         game.init();

     </script>

  </body>

 </html>

JavaScript-永远点不到的小窗口的更多相关文章

  1. javascript的40个网页常用小技巧

    下面是javascript的40个网页常用小技巧,对网站开发人员相信会有帮助.1. oncontextmenu="window.event.returnValue=false" 将 ...

  2. JS设置弹出小窗口。

    经常上网的朋友可能会到过这样一些网站,一进入首页立刻会弹出一个窗口,或者按一个连接或按钮弹出,通常在这个窗口里会显示一些注意事项.版权信息.警告.欢迎光顾之类的话或者作者想要特别提示的信息.其实制作这 ...

  3. js制作带有遮罩弹出层实现登录小窗口

    要实现的效果如下 点击“登录”按钮后,弹出登录小窗口,并且有遮罩层(这个名词还是百度知道的,以前只知道效果,却不知道名字) 在没有点击“登录”按钮之前登录小窗口不显示,点击“登录”按钮后小窗口显示,并 ...

  4. IPTV小窗口播放视频 页面焦点无法移动的解决方法

    在IPTV高清页面中,小窗口播放视频时,在某些机顶盒上(如高清中兴.高清大亚4904)会出现焦点无法移动现象,即按键无响应.被这个bug困扰了很久,虽然我知道解决方法,但只知其然,不知其所以然.今天做 ...

  5. Javascript跳转页面和打开新窗口等方法

    1.在原来的窗体中直接跳转用onClick="window.location.href='你所要跳转的页面';" 2.在新窗体中打开页面用:onclick="window ...

  6. 使用【 ajax 】【 bootstrap 】显示出小窗口 详情内容 一些代码意思可以参考下一个文章

    使用[ bootstrap ]显示出小窗口  详情内容 显示页面 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional// ...

  7. 警告（alert 消息对话框） 如果你不点击“确定”，就不能对网页做任何操作，这个小窗口就是使用alert实现的

    警告(alert 消息对话框) 我们在访问网站的时候,有时会突然弹出一个小窗口,上面写着一段提示信息文字.如果你不点击"确定",就不能对网页做任何操作,这个小窗口就是使用alert ...

  8. Android Studio 恢复小窗口停靠模式(Docked Mode)

    安卓studio在使用小窗口时,如果我们点击取消了窗口的docked mode模式,窗口就会变成,你一旦触发窗口以外的区域,窗口就会龟缩回去.此时,如果你想要恢复回原来的docked mode的话,具 ...

  9. 黑马程序员_Java基础：多功能小窗口，swing，io，net综合应用

    ------- android培训.java培训.期待与您交流! ---------- 概念原理的理解,不代表能熟练应用. 如果将多个知识点关联并应用起来,这能加快我们对知识的掌握. 作为一个初学者, ...

  10. [ucgui] 对话框2——小窗口初始化与消息响应

    >_<" 上一节已经说过,创建过得窗口虽然可见,但是它们是以 “空”的形式出现的.这是因为对话框过程函数尚未包含初始化单个元素的代码.小工具的初始值.由它们所引起的行为以及它们之 ...

随机推荐

  1. MFC 获取图像的大小

    // 获致图像的大小 int CCImageDialog::GetImageSize(CSize& size, CString filename) { CImage image; image. ...

  2. jdk环境变量的配置并检测是否配置成功

    JDK环境变量配置进行java开发,首先安装JDK,安装后进行环境变量配置1,下载JDK(http://java.sun.com/javase/downloads/index.jsp)2.安装jdk- ...

  3. Android Dex文件格式(一)

    dex是Android平台上(Dalvik虚拟机)的可执行文件, 相当于Windows平台中的exe文件, 每个Apk安装包中都有dex文件, 里面包含了该app的所有源码, 通过反编译工具可以获取到 ...

  4. @RequestMapping(value = "{adminPath}")

  5. Light OJ 1029- Civil and Evil Engineer （图论-最小生成树）

    题目链接:http://www.lightoj.com/volume_showproblem.php?problem=1029 题目大意:一个发电站,给n座房子供电, 任意房子之间有电线直接或者间接相 ...

  6. mouseChildren启示

    将aSprite的 mouseChildren 属性设置为 false ,可以实现mouseClick 事件的目标为 aSprite对象,而不是其子对象中的任一个.

  7. sql server 按分组拼接数据

    SELECT B.id , LEFT(tempname, LEN(tempname) - 1) AS name FROM ( SELECT id , ( SELECT name + ',' FROM ...

  8. Phabricator部署手册

    参考:https://secure.phabricator.com/book/phabricator/article/installation_guide/ 概述 phabricator,由faceb ...

  9. 未添加document.ready产生的BUG

    今天在框架里使用superslide插件时,在javascript部分 <script type="text/javascript"> jQuery(".yj ...

  10. 这有一个flag

    1.并查集[1224] 2.最小生成树?? 3.topsort(好洋气): 4.归并排序[1438]: 5.差分约束系统: 6.A*算法找k短路 7.scanf: 8.搜索[P1198]华容道: 9. ...