<!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. android 术语

    Context : 是android 应用程序的 中央控制中心.所有应用程序特有的功能通过context 进行访问. Activity: 一个 Android 应用有若干个 task 任务组成,每个人 ...

  2. 扫盲贴000---关于python中的if __name__ == '__main__'

    对于python中的__name__变量,根据调用python文件的方式不同,__name__变量的值也会不同.假如我有一个名为hello_world.py的python脚本,当我的目的是直接运行这个 ...

  3. C语言fgetpos()函数：获得当前文件的读写指针（转）

    头文件:#include<stdio.h>fgetpos()函数获得当前文件的指针所指的位置,并把该指针所指的位置信息存放到pos所指的对象中.pos以内部格式存储,仅由fgetpos() ...

  4. Javascript中DOM的练习

    第一个题:html计时器 方法一: <body onLoad="show()" > <div id="b"></div> & ...

  5. Singleton in C++11 style

    #include <iostream> #include <memory> #include <mutex> class SingletonOld { static ...

  6. Android 7.0 UICC 分析(二)

    本文讲解UiccCard类 /frameworks/opt/telephony/src/java/com/android/internal/telephony/uicc/UiccCard.java U ...

  7. TOMCAT的安装部署配置（配图解）

    TOMCAT的安装部署配置 前提已经成功搭建配置JDK 下载好压缩包后,直接解压至某一目录下,目录中不能包含中文 双击安装文件,出现如下界面 点击[NEXT],出现如下界面 点击[I AGREE],出 ...

  8. lamp php的ssl，ssh支持

    Php支持ssl,ssh扩展: 准备:可以成功解析php 1.curl的安装 [root@localhost~]# cd /usr/local/src/ [root@localhost~]# wget ...

  9. JavaWeb 学习0010-今日问题 2016-12-3

    2016-12-3 1. 今天要做的第一个问题就是,怎么把网页变得好看点: addStudent/listStudent页面都有改动 其中 list页面还有了<c:if 的语句这是还没练习过得知 ...

  10. python课程第二周重点记录

    python课程第二周重点记录 1.元组的元素不可被修改,元组的元素的元素可以被修改(字典在元组中,字典的值可以被修改) 2.个人感觉方便做加密解密 3.一些方法的使用 sb = "name ...