<!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. vb.net字符串格式转为日期型

    vb.net字符串格式转为日期型  比如 "20080815" 转换为"2008-05-15"Dim a As Date  Dim s As String = ...

  2. VFP正则表达式判断是否是手机号码／电子邮件

    正则表达式,可以理解为字符匹配或搜索技术 ,重要的是Pattern属性的写法． *--判断是否是手机号码Function isMobiPhoneLparameters cStroRegExp=Newo ...

  3. 用Docker Compose启动Nginx和Web等多个镜像

    安装docker-compose 运行命令 curl -L "https://github.com/docker/compose/releases/download/1.9.0/docker ...

  4. IELTS Writing Tips

  5. （转）maven配置之pom.xml配置

    <project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/20 ...

  6. 全面的Seo面试题

      一.选择题(每题2分,2分×10＝20分) 1.白帽SEO诞生日是: A .1997年9月15日 :B .2004年12月13日:C.2005年3月26日:D.2009年6月1日 2.一个做女性服 ...

  7. GD图片（画布）的制作及验证码的应用

    创建画布:创建画布的函数有 imagecreatetruecolor(width,height);创建画布 width指画布的宽height指画布的高 imagecolorallocate(img,r ...

  8. 在table中进行内容搜索

    $("tbody td").filter(":contains('" + x + "')").css('color','red').pare ...

  9. C# DataGridView控件清空数据完美解决方法

    C# DataGridView控件绑定数据后清空数据在清除DataGridview的数据时: 1.DataSource为NULL(DataGridView.DataSource= null;)这样会将 ...

  10. android 内存问题

    借鉴:大苞米的博客(http://blog.csdn.net/a396901990) 一.内存溢出(OOM--out of memory) (1)内存溢出引发的问题展现: 1.程序卡顿,响应速度慢(内 ...