1.  <!doctype html>
  2.  <html>
  3.   <head>
  4.      <meta charset="UTF-8">
  5.      <title>在当前显示区范围内实现点不到的小方块</title>
  6.      <style>
  7.          div{position:fixed;width:500px;height:500px;
  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.                  //为pop绑定鼠标进入事件监听,函数为
  42.                  this.pop.addEventListener("mouseover",
  43.                      function(e){//获得时间对象e
  44.                          //反复执行
  45.                          while(true){
  46.                          //在0-MAXTOP之间生成随机数,保存在变量rTop中
  47.                          var rTop=Math.floor(Math.random()*(this.MAXTOP+1));
  48.                          //在0-MAXLEFT之间生成随机数,保存在变量rLeft中
  49.                          var rLeft=Math.floor(Math.random()*(this.MAXLEFT+1));
  50.                          //获得鼠标相对于文档显示区的x坐标
  51.                          var x= e.clientX;
  52.                          //获得鼠标相对于文档显示区的y坐标
  53.                          var y= e.clientY;
  54.                          //如果!(x>=rLeft&&x<rLeft+PSIZE
  55.                          // &&y>=rTop&&y<=rTop+PSIZE)
  56.                          if(!(x>=rLeft&&x<rLeft+this.PSIZE&&y>=rTop&&y<=rTop+this.PSIZE)){
  57.                          //如果新位置不包含鼠标位置
  58.                          //设置pop的top为rTop
  59.                          this.pop.style.top=rTop+"px";
  60.                          //设置pop的left为rLeft
  61.                          this.pop.style.left=rLeft+"px";
  62.                          //退出循序
  63.                          break;
  64.                            }
  65.                          }
  66.                      }.bind(this)
  67.                  );
  68.              }
  69.  
  70.          }
  71.          game.init();
  72.      </script>
  73.  
  74.   </body>
  75.  </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. Java继承，多态，组合应用

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

  2. Listbox简单用法

    <ListBox x:Name="ListBoxPatientAllergy" Grid.Row="1" ItemContainerStyle=" ...

  3. Masonry学习笔记

    1.边距 [bottomView mas_makeConstraints:^(MASConstraintMaker *make) { make.left.equalTo(self.view).offs ...

  4. wpf 常见死锁方式

    Thread tr0 = new Thread(new ParameterizedThreadStart((obj1) => { lock (aaa) { Thread.Sleep(); thi ...

  5. Node.js intro

    1. require() load module http://stackoverflow.com/questions/9901082/what-is-this-javascript-require ...

  6. RTTI 运行时类型识别 及异常处理

    RTTI   运行时类型识别 typeid  ------  dynamic_cast dynamic_cast 注意事项: 1.只能应用于指针和引用之间的转化 2.要转换的类型中必须包含虚函数 3. ...

  7. Redis学习笔记-初级

    1.Redis简介 Redis是一个高效缓存内存数据库,开源.免费.key-value格式 相比于其他key-value格式的缓存产品,特点/优势在于: 支持持久化,可以将内存中的数据保存在磁盘中,重 ...

  8. mybatis组合模糊+分页查询

    //组合模糊查询就是这么简单 <select id="findAllJiemu" parameterType="java.util.Map" result ...

  9. 图片缩放应用（nearest / bilinear / three-order interpolate）

    typedef xPixel PIXELCOLORRGB; double Sinxx(double value){ if (value < 0) value = -value; if (valu ...

  10. Access批量操作

    鉴于C#要插5万条记录到Access很慢,在网上找了好久的资料,终于找到了比较有用的信息(转载自Bach)谢谢! 总结如下: 1.导出TXT:  select * into [data.txt] in ...