JavaScript 实例：点击漫天小星星（获取整个浏览器窗口的宽高）

//获取整个浏览器窗口的宽高。
var winWidth = window.innerWidth ? window.innerWidth : document.documentElement.clientWidth;
var winHeight = window.innerHeight ? window.innerHeight : document.documentElement.clientHeight; //为了兼容浏览器，所以用三元条件运算符

火狐浏览器：window.innerWidth
IE浏览器：document.documentElement.clientWidth

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<script type="text/javascript">
//实例：随机显示小星星
/*(1)网页加载完成，背景色为黑色(2)创建图片节点，并追加到body父节点下(3)定时器(4)星星随机大小(5)星星随机定位(6)单击星星，星星消失。
*/
window.onload = function()
{document.body.bgColor = "#000";//定时器开关window.setInterval("start2()",1000);
}
function start2()
{//创建图片节点var imgObj = document.createElement("img");//追加到body节点document.body.appendChild(imgObj);//添加src属性imgObj.setAttribute("src","images/xingxing.gif");//添加width属性var imgWidth = getRandom(15,85);imgObj.setAttribute("width",imgWidth);//添加style属性var winWidth = window.innerWidth ? window.innerWidth : document.documentElement.clientWidth;var winHeight = window.innerHeight ? window.innerHeight : document.documentElement.clientHeight;var x = getRandom(0,winWidth);var y = getRandom(0,winHeight);imgObj.setAttribute("style","position:absolute;left:"+x+"px;top:"+y+"px");//单击删除星星imgObj.setAttribute("onclick","removeImg(this)");
}
function removeImg(imgObj)
{//删除子节点imgdocument.body.removeChild(imgObj);
}
function getRandom(min,max)
{var random = Math.random()*(max-min)+min;//向下取整random = Math.floor(random);//返回值return random;
}
</script>
</head><body>
</body>
</html>

JavaScript 实例：点击漫天小星星（获取整个浏览器窗口的宽高）相关推荐

js兼容性——获取当前浏览器窗口的宽高
通过onresize事件 1 window.onresize = function () { 2 document.title = client().width + " "+ cl ...
javascript 快速获取图片实际大小的宽高
javascript 快速获取图片实际大小的宽高简陋的获取图片实际宽高的方式 // 图片地址 var img_url = '13643608813441.jpg'// 创建对象 var img = ...
js进阶 11-6 jquery如何获取和设置元素的宽高（jquery多方法）
js进阶 11-6 jquery如何获取和设置元素的宽高(jquery多方法) 一.总结一句话总结:jquery里面多是方法啊,比如jquery对象的宽高.所以取值是方法,赋值就是方法里面带参数. ...
JS获取浏览器可视区域宽高
写在前面浏览器可视区域宽高并不就等于浏览器窗口宽高,而是除去顶部标签栏+滚动条(如果有)+控制台(如果有f12打开)之外的尺寸大小因为比较简单所以直接上代码: let w, h; // 对于ie9 ...
js 获取上传图片和视频的宽高，还有视频的时长
场景: 当产品经理告诉你说:我们需要限制上传的图片或视频的尺寸,不符合要求不允许上传,这个时候你该怎么做? 不用多想,很明显我们需要想办法拿到图片或视频的宽度,然后和预期的尺寸进行对比过滤,就能轻易实 ...
android onresume时view,Android中为什么在onResume之前(包括onResume)获取不到View的宽高？...
已知点: 1.View绘制流程的起点是 ViewRootImpl#scheduleTraversals() : 2.在onCreate里的setContentView中确定了布局文件中有哪些对象: ...
JS如何设置获取盒模型对应的宽高
dom.style.width/height(只适用获取内联元素的宽和高) dom.currentStyle.width/height(获取渲染后的宽高,但是仅IE支持) window.getComp ...
Android获取UI控件的宽高
一.概述我们如果开发一些依赖于UI控件宽高的功能,那么自然会想到调用View的getHeigth()和getWidth()方法,对于新手来说,这里有一个坑,你在Activity中的onCreate( ...
在Vue中获取DOM元素的实际宽高
最近使用 D3.js 开发可视化图表,因为移动端做了 rem 适配,所以需要动态计算获取图表容器的宽高,其中涉及到一些原生DOM API的使用,避免遗忘这里总结一下. 一.获取元素在 Vue 中可以 ...
如何获取edge浏览器上好看的高清主题壁纸
今天在edge上看到了个还不错的主题,换上去的效果如下: 帅啊这个壁纸,所以想换到我的电脑桌面上,但是如何获取这种主题壁纸呢? 在浏览器首页右键 -- 检查 -- 点击控制面板左上角的箭头,然后 ...

JavaScript 实例：点击漫天小星星（获取整个浏览器窗口的宽高）

JavaScript 实例：点击漫天小星星（获取整个浏览器窗口的宽高）相关推荐

最新文章

热门文章

JavaScript 实例：点击漫天小星星 （获取整个浏览器窗口的宽高）

JavaScript 实例：点击漫天小星星 （获取整个浏览器窗口的宽高）相关推荐

最新文章

热门文章

JavaScript 实例：点击漫天小星星（获取整个浏览器窗口的宽高）

JavaScript 实例：点击漫天小星星（获取整个浏览器窗口的宽高）相关推荐