JavaScript-在当前显示区范围内实现点不到的小方块
<!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-在当前显示区范围内实现点不到的小方块的更多相关文章
- 【百度地图API】如何利用自己的数据制作社交地图?只显示可视区域内的标注
原文:[百度地图API]如何利用自己的数据制作社交地图?只显示可视区域内的标注 摘要:如果你自己的数据已经超过1万个,如何进行合理的显示?除了聚合marker外,还有一个办法.那就是,只显示可视区域内 ...
- JavaScript之函数,词法分析,内置对象和方法
函数 函数定义 JavaScript中的函数和Python中的非常类似,只是定义方式有点区别. // 普通函数定义 function f1() { console.log("Hello wo ...
- [转]javascript 快速隐藏/显示万行表格列的方法
原文地址:javascript 快速隐藏/显示万行表格列的方法 隐藏表格列,最常见的是如下方式: td.style.display = "none"; 这种方式的效率极低.例如,隐 ...
- Unity 屏幕外死亡的敌人的分数显示在屏幕内
在敌人死亡后,会出现分数,如果敌人死亡的位置在屏幕内,那么使得获得的分数显示在屏幕内,超出屏幕范围的,显示在屏幕外 当然,这里例子是使得场景中的物体显示在屏幕内,当然也可以使用纯粹的UGUI物体的显示 ...
- JavaScript全屏显示
JavaScript全屏显示 需要引入的库 https://cdn.bootcss.com/jquery/1.9.0/jquery.min.js https://cdn.bootcss.com/scr ...
- javascript隐藏和显示元素以及清空textarea
当前希望写一个单选框,选中“paste”则显示粘贴框,选中“upload”则提示选择文件. 因为这两种情况只是显示不同,所以只需要用javascript来进行显示和隐藏. 最后的结果大概这样: 初始时 ...
- PDF.Js的使用—javascript中前端显示pdf文件
PDF.Js的使用—javascript中前端显示pdf文件 写于2018/12/6 起因是一个图片展示页面需要展示pdf格式的文件,所以查了半天决定使用pdf.js,我也不求有多了解它,能实现我想要 ...
- JavaScript封装一个函数效果类似内置方法concat()
JavaScript封装一个函数效果类似内置方法concat() 首先回忆concat()的作用: concat() 方法用于连接两个或多个数组.该方法不会改变现有的数组,而仅仅会返回被连接数组的一个 ...
- uni-app中当uni.navigateTo传的参数为object时,通过传递的不同参数,在显示单页面内通过v-if判断显示出对应的内容(可实现多页面效果)
通过uni-app中当uni.navigateTo传的参数为object时,通过传递的不同参数,在显示单页面内通过v-if判断显示出对应的内容(可实现多页面效果) 起始页跳转到对应页面,并传递参数(o ...
随机推荐
- jquery template模版引擎
jTemplates http://jtemplates.tpython.com/ jquery-template https://github.com/codepb/jquery-template ...
- cf 733f
给你很多条边,每条边有一个初始边权w1,然后还有一个值表示把这个边权减一的代价w2,然后给你一个预算budget,然后让你输出怎么选边之后构成的树的边权和最小(在用budget减少了边权之后),输出你 ...
- linux默认网关的设置
linux装系统设IP,这应该是系统管理员的基本功,可是不同的网络结构有不同的ip设法,您知道吗? 1.一块网卡的情况 这个没啥好说的,估计地球人都知道:address,netmask,gatew ...
- Java中基本数据类型的对比记忆
Java中八种基本类型数据情况: 数据类型 所占字节数 所占位数(二进制位数) 可表示范围 默认值 包装类 备注 byte(字节) 1 8 -128 - 127 0 Byte short(短整 ...
- oracle常用命令大全及心得
学习时整理的 Oracle 1.set linesize 100; 设置长度2.set pagesize 30; 设置每页显示数目3.em a.sql 打开记事本 4.@ a 执行文件a中的代码,可指 ...
- 使用miniui框架制作树形节点
<div id="leftTree" class="mini-outlooktree" url="<%=basePath%>mana ...
- nginx 隐藏版本信息
隐藏nginx头部 修改后的src/core/nginx.h ,代码如下: /* * Copyright (C) Igor Sysoev * Copyright (C) Nginx, Inc ...
- Linux入门学习 常用命令
cd命令 功能是切换到指定的目录:命令格式:cd [目录名]有几个符号作为目录名有特殊的含义:"/"代表根目录.".."代表上一级目录."~" ...
- oracle查询出的字段加引号
SELECT 'list.add("' || t.dummy || '");' as listFROM dual t where rownum < 600; 执行结果: SE ...
- nginx php rewrite配置
server { listen 80; server_name xxx.cn www.xxx.cn; index index.html index.htm index.php; root /data/ ...