<!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. CALayer

    刚刚无聊,画了一个月亮. - (void)viewDidLoad { [super viewDidLoad]; self.view.layer.backgroundColor = [UIColor b ...

  2. vyatta常用操作

    vyatta是一个小巧而强大的基于debian的 Linux路由发行版,随着云计算的深入,云内部的虚拟机通信已经摆脱了物理路由器的束缚,而路由器变成了一个逻辑存在,而不是一个物理实体,云路由由此诞生, ...

  3. IDEA内存溢出问题：

    -Xms1024m -Xmx1024m -XX:MaxPermSize=512m 内存泄露是指程序中间动态分配了内存,但在程序结束时没有释放这部分内存,从而造成那部分内存不可用的情况,重启计算机可以解 ...

  4. 完整地mybatis + springmvc用checkbox实现批量删除

    因为自己在网上找了半天,都找不到完整地代码(脑袋笨,不会变通到自己项目里),所以在这里记下了近乎完整的代码 前端代码 <span style="cursor:pointer;" ...

  5. C语言调用curl库抓取网页图片(转)

    思路是先用curl抓取网页源码,然后以关键字寻找出图片网址.  范例: #include <stdio.h> #include <stdlib.h> #include < ...

  6. uvm - dut

    module dut(clk, rst_n, rxd, rx_dv, txd, tx_en); input clk; input rst_n; :] rxd; input rx_dv; :] txd; ...

  7. 经典的找不到符号（symbol）错误 #iOS开发

    使用BmobSDK的过程中,编译时出现了以下错误信息,意思是 -[BmobSRWebSocket _innerPumpScanner] 这个方法引用了 "_utf8_nextCharSafe ...

  8. 各大浏览器 CSS3 和 HTML5 兼容速查表

    不知不觉中,支持 CSS3 和 HTML5 的浏览器变得越来越多,甚至包括最新版的 IE,当然,所谓支持仅仅是部分支持,因为 CSS3 和 HTML5 的W3C 规范都尚未形成.如果你现在就希望使用 ...

  9. Android开发学习---android下的数据持久化,保存数据到rom文件,android_data目录下文件访问的权限控制

    一.需求 做一个类似QQ登录似的app,将数据写到ROM文件里,并对数据进行回显. 二.截图 登录界面: 文件浏览器,查看文件的保存路径:/data/data/com.amos.datasave/fi ...

  10. ubuntu-apache如何解决跨域资源访问

    参考:http://blog.csdn.net/emily201314/article/details/52877277 步骤1 #打开apache的headers模块 sudo a2enmod he ...