原生JS实现雪花飘落的效果
Posted So istes immer
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了原生JS实现雪花飘落的效果相关的知识，希望对你有一定的参考价值。
1.代码
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<!-- 设置网站图标favicon -->
<link rel="shortcut icon" href="favicon.ico" type="image/x-con" />
<title>❄雪❄</title>
</head>
<style>
* padding: 0;margin: 0; /*所有元素的内边距,外边距都设置为0(HTML元素有自己默认的样式)*/
body
width: 100%;
height: 100%;
background: url("bg.jpg") no-repeat;
background-size: cover; /*保持图像的纵横比并将图像完全覆盖父容器*/
overflow: hidden; /*内容溢出就隐藏*/
</style>
<body>
<div id="main"></div>
<script>
const Scene = function(); //创建一个Scene对象
//为这个对象添加一个具有一个参数的原型方法
Scene.prototype.draw=function(snow)
let fallingHeight = 0; //雪花下落的高度
let screenWidth = document.documentElement.clientWidth; //获取浏览器窗口文档显示区域的宽度,不含滚动条
let screenHeight = document.documentElement.clientHeight;//获取浏览器窗口文档显示区域的高度,不含滚动条
snow.style.color="#fff"; //设置雪花颜色为白色
snow.style.fontSize=12+Math.ceil(Math.random()*14)+'px'; //随机设置雪花大小
snow.style.opacity=(Math.ceil(Math.random()*3)+7)/10+""; //随机设置雪花的透明度
let startPos=Math.ceil(Math.random()*screenWidth);
snow.style.left=startPos+'px'; //随机设置雪花开始出现的水平位置
setInterval(function()
//雪花每300ms下降10px,当下降距离大于screenHeight,雪花消失
if(fallingHeight<screenHeight)
snow.style.top=fallingHeight+'px';
snow.style.left=startPos+Math.ceil(Math.random()*8)+'px'; //雪花向左随机移动一段距离
fallingHeight+=10;
else
snow.style.display = 'none';
,300)
let main = document.getElementById('main')
//用定时器每500ms创建一个雪花
setInterval(function()
let snow = document.createElement('div') //创建div
snow.innerHTML ="❄" //div的内容设置为雪花图形
snow.style.position='absolute' //设置div为绝对定位
main.append(snow) //把创建好的div放进main容器中
let scene = new Scene() //创建Scene对象
scene.draw(snow) //执行Scene对象的draw方法
,500)
</script>
</body>
</html>同一目录下放两张图片：bg.jpg和favicon.ico
2.效果
以上是关于原生JS实现雪花飘落的效果的主要内容，如果未能解决你的问题，请参考以下文章