<!doctype html>

 <html>

  <head>

     <meta charset="UTF-8">

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

     <style>

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

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

             }

         }

         game.init();

     </script>

  </body>

 </html>

JavaScript-在当前显示区范围内实现点不到的小方块的更多相关文章

  1. 【百度地图API】如何利用自己的数据制作社交地图？只显示可视区域内的标注

    原文:[百度地图API]如何利用自己的数据制作社交地图?只显示可视区域内的标注 摘要:如果你自己的数据已经超过1万个,如何进行合理的显示?除了聚合marker外,还有一个办法.那就是,只显示可视区域内 ...

  2. JavaScript之函数，词法分析，内置对象和方法

    函数 函数定义 JavaScript中的函数和Python中的非常类似,只是定义方式有点区别. // 普通函数定义 function f1() { console.log("Hello wo ...

  3. [转]javascript 快速隐藏/显示万行表格列的方法

    原文地址:javascript 快速隐藏/显示万行表格列的方法 隐藏表格列,最常见的是如下方式: td.style.display = "none"; 这种方式的效率极低.例如,隐 ...

  4. Unity 屏幕外死亡的敌人的分数显示在屏幕内

    在敌人死亡后,会出现分数,如果敌人死亡的位置在屏幕内,那么使得获得的分数显示在屏幕内,超出屏幕范围的,显示在屏幕外 当然,这里例子是使得场景中的物体显示在屏幕内,当然也可以使用纯粹的UGUI物体的显示 ...

  5. JavaScript全屏显示

    JavaScript全屏显示 需要引入的库 https://cdn.bootcss.com/jquery/1.9.0/jquery.min.js https://cdn.bootcss.com/scr ...

  6. javascript隐藏和显示元素以及清空textarea

    当前希望写一个单选框,选中“paste”则显示粘贴框,选中“upload”则提示选择文件. 因为这两种情况只是显示不同,所以只需要用javascript来进行显示和隐藏. 最后的结果大概这样: 初始时 ...

  7. PDF.Js的使用—javascript中前端显示pdf文件

    PDF.Js的使用—javascript中前端显示pdf文件 写于2018/12/6 起因是一个图片展示页面需要展示pdf格式的文件,所以查了半天决定使用pdf.js,我也不求有多了解它,能实现我想要 ...

  8. JavaScript封装一个函数效果类似内置方法concat()

    JavaScript封装一个函数效果类似内置方法concat() 首先回忆concat()的作用: concat() 方法用于连接两个或多个数组.该方法不会改变现有的数组,而仅仅会返回被连接数组的一个 ...

  9. uni-app中当uni.navigateTo传的参数为object时，通过传递的不同参数，在显示单页面内通过v-if判断显示出对应的内容（可实现多页面效果）

    通过uni-app中当uni.navigateTo传的参数为object时,通过传递的不同参数,在显示单页面内通过v-if判断显示出对应的内容(可实现多页面效果) 起始页跳转到对应页面,并传递参数(o ...

随机推荐

  1. CRM域用户误删恢复

    记录一下: 不小心将CRM用户在域中删除了(CRM中未删除),直接新建一个同样账号的域用户然后尝试在CRM中登录报“invalid user”错误,一番检查发现从2011版本开始CRM中不单记录了用户 ...

  2. JOSN 为空数据的处理

    for(var i=0,l=thisuserList.length;i<l;i++){ for(var key in thisuserList[i]){ if(thisuserList[i][k ...

  3. android ListView子布局中按钮响应点击事件

    只需要在子布局的根布局中添加以下属性即可: android:descendantFocusability="blocksDescendants"

  4. Apache伪静态在网站目录没有反斜杠后自动添加反斜杠

    第一步:确认网站开启REWRITE规则 一般有两种情况: i.apache安装的时候已经包含rewrite功能 ii.后续配置的时候新添加mod_rewrite.so.这种情况需要在httpd.con ...

  5. arduino编程语言Wiring参考手册API

    对Arduino的编程是利用 Arduino编程语言 (基于 Wiring)和Arduino开发环境(based on Processing)来实现的. 通过编程,Arduino可以实现很多种功能. ...

  6. Pow 算法

    #include <iostream> using namespace std; template<class T, class Int> T Pow(T x, Int n) ...

  7. (转)java中静态代码块的用法 static用法详解

    一)java 静态代码块 静态方法区别一般情况下,如果有些代码必须在项目启动的时候就执行的时候,需要使用静态代码块,这种代码是主动执行的;需要在项目启动的时候就初始化,在不创建对象的情况下,其他程序来 ...

  8. database link远程链接数据库

    --授权创建.删除dblink GRANT CREATE [PUBLIC] DATABASE LINK,DROP [PUBLIC] DATABASE LINK TO canco; --查看数据库GLO ...

  9. IIS内存溢出-设置IIS的应用程序池

    在ASP.NET Web服务器上,ASP.NET所能够用到的内存,通常不会等同于所有的内存数量.在machine.config(C:/WINDOWS/Microsoft.NET/Framework/v ...

  10. 一次疏忽导致的bug

    NBB_PUT_SHORT 这个宏是按char* 类型算指针的实际工作中,没有注意这一点,输入指针类型 强转为了 SHORT* 导致 填充的内容错误 这是第一次在工作中遇到 指针类型相关的问题值得记录 ...