<!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. Loadrunner ---集合点设置

    测试场景,实现用户登录的200并发: 1.录制登录退出脚本,且登录退出放aciton中 2.在登录的地方设置集合点 设置集合点有如下4中方式: 1)在要插入集合点的地方,右击鼠标按如下图操作:

  2. javascript篇-----函数apply()和call()

    转自:http://www.jb51.net/article/28013.htm 如果没接触过动态语言,以编译型语言的思维方式去理解javaScript将会有种神奇而怪异的感觉,因为意识上往往不可能的 ...

  3. [Docker] docker 基础学习笔记3（共6篇）

    首先我们安装好了ssh server之后, 我们需要将这个容器commit,然后启动这个被commit的image. 启动方式: docker run -d -p 2222:22 /usr/sbin/ ...

  4. PHP入门篇

    一.PHP-什么是变量  变量是用于存储值的,我们命令服务器去干活的时候,往往需要产生一些数据,需要临时性存放起来,方便取用.我们也可以理解为,变量就像一个购物袋,我们可以用来装苹果.榴莲(当然也可以 ...

  5. linux 登录档配置分析

    登录档的重要性 解决系统方面的错误: 解决网络服务的问题: 过往事件记录簿: Linux 常见的登录档档名 /var/log/cron: 你的 crontab 排程有没有实际被进行? 进行过程有没有发 ...

  6. 统计黑ip的脚本

    #!/bin/bash > ] do cd /var/openresty/nginx/logs#统计nginx日志,将结果重定向到文件blackip.txt中 cat access.log|gr ...

  7. Git学习（二）——创建版本库、查看与回退版本

    一.创建版本库 版本库,又名仓库(Repository),可以简单理解为一个目录,这个目录里的所有文件可以被Git管理起来,每个文件的修改.删除,Git都能跟踪,以便任何时刻都可以追踪历史,或者将来某 ...

  8. scp详解

    scp 命令 ================== scp 可以在 2个 linux 主机间复制文件: 命令基本格式:        scp [可选参数] file_source file_targe ...

  9. （转）SQL Server 性能调优（cpu）

    摘自:http://www.cnblogs.com/Amaranthus/archive/2012/03/07/2383551.html 研究cpu压力工具 perfom SQL跟踪 性能视图 cpu ...

  10. html导入css样式的方法

    在html网页中引入css样式表主要有一下四种方法 1.行内引入 <p style="width:100px;height:40px;color:red;"></ ...