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

最新推荐文章于 2021-09-01 21:22:17 发布
最新推荐文章于 2021-09-01 21:22:17 发布
阅读量837 收藏
点赞数
分类专栏： JavaScript 文章标签： javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/houyanhua1/article/details/78492300
版权
//获取整个浏览器窗口的宽高。
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)
{
	//删除子节点img
	document.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>


houyanhua1
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
js实现漫天星星效果
11-27
本文实例为大家分享了漫天小星星效果的实现代码，供大家参考，具体内容如下 效果图： 实现代码： <html onclick="init(event)"> <head> <title> new document </title> <meta http-equiv="Content-Type" content="text/html;charset=UTF-8" /> [removed] //点出漫天小星星 //背景色 //给html添加onclick事件 //创建图片节点，并追加到body父节点下 //图片的随机大小 f
js获取浏览器高度 窗口高度 元素尺寸 偏移属性的方法
10-21
在本文中，我们将深入探讨如何使用JavaScript获取浏览器高度、窗口高度、元素尺寸以及元素的偏移属性。这些都是前端开发中常见的需求，理解并掌握这些方法对于优化用户体验至关重要。 首先，我们来看如何获取浏览器...
JavaScript 实例：点击漫天小星星 创建标签元素并加到父标签下
houyanhua1的专栏
11-08 365
漫天星星 body{ margin:0px; height:300px; /* 为body标签指定高度，否则高度可能是0px */ } //window.setInterval("star(event)",1000); //在页面点击，能够出现小星星 //这个图片是随机大小的 window.onload=init; //页面加载时执行
Javascript实现点出漫天小星星
Dev-Liangjian的博客
12-11 629
<!DOCTYPE html> <html onclick="init(event)"> <head> <meta charset="UTF-8"> <title>点出漫天小星星</title> <script type="text/javascript"> function init(e){
javascript满天小星星
weixin_30417487的博客
11-03 104
转载于:https://www.cnblogs.com/developer-you/p/6025031.html
js打怪升级之路三 点出满天小星星
liuqun of program life
12-23 407
点出满天小星星 不懂多敲几遍即可 &lt;html onclick="init(event)"&gt; &lt;head&gt; &lt;meta http-equiv="Content-Type" content="text/html; charset=utf-8" /&gt; &lt;title&gt;无标题文档&lt;/title&gt; &lt;sc
javascript获取和判断浏览器窗口、屏幕、网页的高度、宽度等
10-25
本文主要探讨了JavaScript中获取和判断浏览器窗口、屏幕以及网页高度和宽度的方法，这对于网页布局和响应式设计至关重要。在JavaScript中，有多种属性和方法可以用来获取不同维度的尺寸信息。 首先，我们关注的是...
javascript获取网页宽高方法汇总
10-23
本文给大家汇总介绍了下javascript获取网页宽高的方法，以及各个浏览器下不同方法获取到的值的对比，有需要的小伙伴可以参考下。
browser-size:获取浏览器的窗口大小并限制调整大小事件
06-24
浏览器大小 获取浏览器的窗口大小和限制的调整大小事件。安装npm install browser-size --save用法创建一个新的浏览器大小实例并添加一个监听器 var browser = require ( 'browser-size' ) ( )browser . on ( '...
JavaScript点击产生星星
weixin_30478619的博客
08-01 251
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> <style> div { width: 500px; ...
星星浏览器
08-25
北京天之歌者科技有限公司 旗下产品星愿浏览器（Twinkstar Browser）,是一款专为年轻人打造的，时尚，个性化的浏览器； 我们将围绕90，00后的上网习惯，开发提高上网效率的酷炫功能
js 特效 html 特效 随鼠标的闪烁小星星
09-03
js 特效 html 特效 随鼠标的闪烁小星星 js 特效 html 特效 随鼠标的闪烁小星星
HTML5非常漂亮的小星星漂动特效 可给任意元素添加效果.rar
09-19
HTML5非常漂亮的小星星漂动特效 可给任意元素添加效果.rar
JS实现小星星特效
11-30
本文实例为大家分享了JS实现小星星特效的具体代码，供大家参考，具体内容如下 鼠标点击窗口实现如图效果： 看起来是不是很像小星星呀 代码如下： <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> </head> <body style="background-color: #000000;"> <!-- 1、鼠标点击 window 2、获取鼠标位置 3、创建img 4、设置 src 5、设置图片位置（图片定位，设置样式） 6、图片随机大小 7、插入body --> <scrip
js打印星星
08-16
最基础的打印星星,对于初学者来说最开始学习JavaScript从打印星星开始是一个良好的开端
js点击页面可以执行一个星星动画
weixin_43360488的博客
11-19 344
加载页面时可以调用函数 (function(window,document,undefined){init()})(window,document); init()函数，里面调用的三个函数 function init(){ cssText(".heart{width: 10px;height: 10px;"+ "position: fixed;background: #f00;"+ "transform:
小星星
dongwanpeng00的专栏
10-11 676
姓名：董万鹏  #include using namespace std; int main() { int i,j,k; for(i=1;i<=6;++i) { for(j=1;j<=6-i;++j) cout<<" "; for(k=1;k<=i;++k) cout<<"*"; cout<<endl; } cout<<endl;
web点击页面出现图案（小星星）
Mellivora9527的博客
09-01 717
<style type="text/css"> 设置页面样式： *{ margin: 0;padding: 0; } body{ position: relative; } img{ position: absolute; } </st...
点击屏幕出现星星
cyq15539975613的博客
08-27 1057
Document
Javascript经典实例
10-30
利用 Javascript 创建弹出式窗口的目的实际上是打开另外的浏览器窗口。你可以设置这个浏览器窗口的一些属性，如高度、宽度以及是否让该窗口有一个状态条或者工具条。在下面的例子中，我将窗口设置为：350 x 400，即...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值