js小练习--模拟满天星

效果展示：实际有很多星星在闪烁只能截到一颗

html代码：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Sample011 - 模拟星空</title><link rel="stylesheet" type="text/css" href="css/cute.css" /><link rel="stylesheet" type="text/css" href="css/index1.css" />
</head>
<body><div id="starry-sky"><span id="stars">★</span></div>
</body>
<!-- 当页面加载完成，载入JavaScript文件，为Html元素添加动作 -->
<script src="js/index1.js" type="text/javascript" charset="utf-8"></script>
</html>

css代码：

#starry-sky{background: rgb(3, 2, 41);width: 100%;height: 100%;position: fixed;
}
#stars{width: 30px;height: 30px;line-height: 30px;text-align: center;font-size: 20px;display: block;color: #fff;position: absolute;
}

js代码：

setInterval(function(){//   获取浏览器课件区域宽度let bodyWidth=document.documentElement.clientWidth;//   获取浏览器课件区域高度let bodyHeight=document.documentElement.clientHeight;//随机坐标xlet x_offset=parseInt(Math.random() * bodyWidth - 30);//随机坐标ylet y_offset=parseInt(Math.random() * bodyHeight - 30);//设置星星x坐标document.getElementById("stars").style.left=x_offset+ "px";//y坐标document.getElementById("stars").style.top=y_offset+ "px";
},1)

新知识：

// 获取浏览器课件区域宽度

let bodyWidth=document.documentElement.clientWidth;

// 获取浏览器课件区域高度

let bodyHeight=document.documentElement.clientHeight;

//随机坐标x

let x_offset=parseInt(Math.random() * bodyWidth - 30);

//随机坐标y

let y_offset=parseInt(Math.random() * bodyHeight - 30);

//设置星星x坐标

document.getElementById("stars").style.left=x_offset+ "px";

//y坐标

document.getElementById("stars").style.top=y_offset+ "px";

js小练习--模拟满天星相关推荐

使用Kakapo.js进行动态模拟
by zzarcon 由zzarcon 使用Kakapo.js进行动态模拟 (Dynamic mocking with Kakapo.js) 3 months after the first comm ...
React.js 小书 Lesson1-2 - 前端组件化（一）：从一个简单的例子讲起
React.js 小书 Lesson1-2 - 前端组件化(一):从一个简单的例子讲起本文作者:胡子大哈本文原文:http://huziketang.com/books/react/lesson2 ...
matlab 模拟心电图,使用原生js+canvas实现模拟心电图的实例
从2015年2月转行进入IT行业,到现在也有将近两年的时间了,从最开始的java到现在的前端,前进的路上一直靠自己摸索,一路走到现在,前端大神是绝对谈不上的,最多算一只刚入门的菜鸟. 从最开始的懵懵懂 ...
一些好玩的js小作品
今天小编给大家带来了一些很实用的js小作品,下面请一看究竟. 1.计算详细年龄工具js脚本 2.检测是否安装Flash插件及版本号js脚本 3.无法查看源码的页面 4.面积换算js脚本 5.体积和容积 ...
微信小程序—模拟豆瓣搜索电影（图文）
微信小程序-模拟豆瓣搜索电影先新建search目录和page 1.在search.wxml页面给input添加bindinput事件给input写一个value值,用来清空给button绑定b ...
用chrome的snippets片段功能创建页面js外挂程序，从控制台创建js小脚本
用chrome的snippets片段功能创建页面js外挂程序,从控制台创建js小脚本 Chrome的snippets是小脚本,还可以创作并在Chrome DevTools的来源面板中执行. 可以访问和 ...
React.js 小书 Lesson12 - state vs props
React.js 小书 Lesson12 - state vs props 本文作者:胡子大哈本文原文:http://huziketang.com/books/react/lesson12 转载请注 ...
React.js 小书 Lesson14 - 实战分析：评论功能（一）
React.js 小书 Lesson14 - 实战分析:评论功能(一) 本文作者:胡子大哈本文原文:http://react.huziketang.com/blog/lesson14 转载请注明出处 ...
React.js 小书 Lesson27 - 实战分析：评论功能（六）
React.js 小书 Lesson27 - 实战分析:评论功能(六) 本文作者:胡子大哈本文原文:http://huziketang.com/books/react/lesson27 转载请注明出 ...

js小练习--模拟满天星

js小练习--模拟满天星相关推荐

最新文章

热门文章