JavaScript实现雪花飘落效果
程序员文章站
2022-03-21 11:29:07
本文实例为大家分享了javascript实现雪花飘落效果的具体代码，供大家参考，具体内容如下一、实现功能（1）添加一个背景图片；（2）用js语言实现雪花飘落效果；（3）使用setinterval定时器...
本文实例为大家分享了javascript实现雪花飘落效果的具体代码，供大家参考，具体内容如下
一、实现功能
（1）添加一个背景图片；
（2）用js语言实现雪花飘落效果；
（3）使用setinterval定时器每800毫秒创建一个雪花；
（4）把每一个雪花作为参数传进动态下落的方法中即可。
二、展示
1.代码展示
代码如下：
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
body {
background-color: #000;
/*防止出现向下滚动条*/
overflow: hidden;
}
</style>
</head>
<body>
<img src="1.jpg" style="height: 800px; width:1500px;">
<script>
function snow() {
// 1、定义一片雪花模板
var flake = document.createelement('div');
// 雪花字符 ❄❉❅❆✻✼❇❈❊✥✺
flake.innerhtml = '❅';
flake.style.csstext = 'position:absolute;color:#fff;';
//获取页面的高度 相当于雪花下落结束时y轴的位置
var documenthieght = window.innerheight;
//获取页面的宽度，利用这个数来算出，雪花开始时left的值
var documentwidth = window.innerwidth;
//定义生成一片雪花的毫秒数
var millisec =10;
//2、设置第一个定时器，周期性定时器，每隔一段时间（millisec）生成一片雪花；
setinterval(function() { //页面加载之后，定时器就开始工作
//随机生成雪花下落 开始 时left的值，相当于开始时x轴的位置
var startleft = math.random() * documentwidth;
//随机生成雪花下落 结束 时left的值，相当于结束时x轴的位置
var endleft = math.random() * documentwidth;
//随机生成雪花大小
var flakesize = 3 + 20 * math.random();
//随机生成雪花下落持续时间
var durationtime = 4000 + 7000 * math.random();
//随机生成雪花下落 开始 时的透明度
var startopacity = 0.7 + 0.3 * math.random();
//随机生成雪花下落 结束 时的透明度
var endopacity = 0.2 + 0.2 * math.random();
//克隆一个雪花模板
var cloneflake = flake.clonenode(true);
//第一次修改样式，定义克隆出来的雪花的样式
cloneflake.style.csstext += `
left: ${startleft}px;
opacity: ${startopacity};
font-size:${flakesize}px;
top:-25px;
transition:${durationtime}ms;`;
//拼接到页面中
document.body.appendchild(cloneflake);
//设置第二个定时器，一次性定时器，
//当第一个定时器生成雪花，并在页面上渲染出来后，修改雪花的样式，让雪花动起来；
settimeout(function() {
//第二次修改样式
cloneflake.style.csstext += `
left: ${endleft}px;
top:${documenthieght}px;
opacity:${endopacity};`;
//4、设置第三个定时器，当雪花落下后，删除雪花。
settimeout(function() {
cloneflake.remove();
}, durationtime);
}, 0);
}, millisec);
}
snow();
</script>
</body>
</html>
2.效果展示
代码如下（示例）：
总结
学会了使用js语言实现雪花飘落特效效果；运用了定时器控制雪花出现的速度；
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。
上一篇： WebSocket使用实例