<!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. 用贝赛尔曲线把图片， 按钮， label 绘成圆 或圆角矩形

    //创建圆形遮罩,把用户头像变成圆形 /* *CGPointMake(35, 35)  是绘图的中心点,  如果想把控件居中绘圆, 一般用控件的中心点,   radius 是圆半径   startAn ...

  2. Java画图程序设计

    本文讲述一个画图板应用程序的设计,屏幕抓图如下: 『IShape』 这是所有图形类(此后称作模型类)都应该实现接口,外部的控制类,比如画图板类就通过这个接口跟模型类“交流”.名字开头的I表示它是一个接 ...

  3. lisp中的nil

    ANSI Common Lisp 第二章 课后习题 7.只使用本章所介绍的操作符,定义一个函数,它接受一个列表作为实参,如果有一个元素是列表时,就返回真. (defun have-list (lst) ...

  4. Java继承，多态，组合应用

    继承:  面向对象的三大特征之一:    是类和类之间的一种拓展关系,是一种从一般到特殊的关系;    格式: sub   extends Super,  我们把sub称为子类或者拓展类, 把supe ...

  5. eclipse maven插件问题：error occurred while automatically activating bundle org.eclipse.m2e.core.ui (525)

    ①所有应用Close Project ②重启eclipse  ③所有应用Open Project 出自:http://blog.csdn.net/qr719169236/article/details ...

  6. jquery each循环,

    jquery each循环,要实现break和continue的功能: break----用return false; continue --用return ture; each()函数是基本上所有的 ...

  7. HTTP认证机制（翻译）

    发现一篇介绍HTTP认证的好文章,就尝试翻译了一下,记录在下面.(翻译的很挫,哈哈哈) 原文: http://frontier.userland.com/stories/storyReader$215 ...

  8. Win7如何显示/隐藏Administrator账号

    为了保证安全,windows7的administrator账户默认在登录时是不显示的. 在登录页面显示administrator账户的方法: 1. 选择"开始"菜单->&qu ...

  9. NOT IN查询效率低，用它的等效写法提高效率。

    最近在处理大数据量导入的时候,使用OPENROWSET将Excel导入到临时表中之后,需要对数据进行唯一性验证.这时候发现使用NOT IN严重影响效率,一条sql可能执行10分钟甚至更久.尝试改变写法 ...

  10. asp.net 将word文档进行编辑并导出一个新的word

    最近做项目,需要多word文档进行编辑并导出一个新的word,在最初的word编辑中留下特定的字符串用来替换,然后在本地生成一个新的word文档,并且不修改服务器中的word文档,这样才能保证服务器中 ...