本文详细介绍如何利用JavaScript原生代码及jQuery库实现网页雪花飘落动画效果。核心逻辑基于setTimeout与setInterval定时器控制雪花的生成、下落动画及销毁。文章重点解析了通过一次性定时器分离DOM渲染与样式修改的执行时序，确保浏览器能正确重绘雪花动态过程，避免样式覆盖导致的静态显示问题。
引言与效果预览
在开发具有视觉特效的网页时，雪花飘落是一种常见且受欢迎的动态效果。本文整理并提供了两种实现方案：分别使用原生JavaScript和jQuery库来完成这一功能。
首先，让我们直观地看一下最终需要实现的雪花飘落视觉效果。
定时器基础概念
本次实现的雪花动画逻辑相对简洁，主要目的是通过实际案例来练习JavaScript中定时器的使用，具体涉及setTimeout和setInterval两个关键方法。
相关概念解释
setTimeout()方法
setTimeout函数用于指定在指定毫秒数之后执行某个函数或代码片段。该函数返回一个整数，代表定时器的ID，后续可通过此ID来取消该定时器。
var timerId = setTimeout(func|code, delay)在上述代码示例中，setTimeout函数接收两个参数：第一个参数func|code是待推迟执行的函数名或代码字符串，第二个参数delay则是推迟执行的毫秒数。
setInterval()方法
setInterval函数的用法与setTimeout完全一致，唯一的区别在于setInterval用于指定某个任务每隔一段时间就执行一次，即实现无限次数的定时重复执行。
clearTimeout()与clearInterval()方法
setTimeout和setInterval函数均返回一个表示计数器编号的整数值。将该整数传入clearTimeout或clearInterval函数，即可取消对应的定时器。
var id1 = setTimeout(f,1000);
var id2 = setInterval(f,1000);
clearTimeout(id1);
clearInterval(id2);注意事项：
setTimeout和setInterval指定的任务，必须等待当前脚本的所有同步任务和“任务队列”中已有的事件全部处理完毕后，才会开始执行。
雪花效果实现逻辑
接下来，我们继续探讨雪花飘落效果的具体实现过程。
实现该效果主要包含以下四个步骤：
1、定义一片雪花的HTML模板； 2、设置第一个定时器，采用周期性定时器（setInterval），每隔一段时间生成一片新的雪花； 3、设置第二个定时器，采用一次性定时器（setTimeout），当第一个定时器生成雪花并在页面上渲染出来后，修改雪花的CSS样式，使雪花产生下落动画； 4、设置第三个定时器，当雪花完成下落动画后，从DOM中删除该雪花元素。
原生JavaScript实现代码
以上是实现思路，下面将展示具体代码。以下代码为原生JavaScript实现版本，文末会附上jQuery版本的实现代码，两者的核心思路一致。
<!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>
<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 = 100;
//2、设置第一个定时器，周期性定时器，每隔一段时间（millisec）生成一片雪花；
setInterval(function() { //页面加载之后，定时器就开始工作
//随机生成雪花下落 开始 时left的值，相当于开始时X轴的位置
var startLeft = Math.random() * documentWidth;
//随机生成雪花下落 结束 时left的值，相当于结束时X轴的位置
var endLeft = Math.random() * documentWidth;
//随机生成雪花大小
var flakeSize = 5 + 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>关键注意事项：
由于通过定时器添加的事件会在下一次Event Loop中执行，因此第二个定时器的作用是确保生成的雪花先被拼接到页面中并完成渲染，随后再修改其样式以触发动画。如果没有这个额外的定时器，浏览器会一次性执行完所有JS代码后再统一渲染页面，导致后续的样式修改直接覆盖前面的样式，雪花将无法表现出动态效果。这与浏览器的渲染线程机制密切相关。
简而言之，使用这个定时器可以将两次修改样式的代码分开执行：先渲染第一次修改后的样式，再进行第二次修改，从而使雪花呈现出运动状态。
jQuery版本实现代码
jQuery版本实现
<!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>
<script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.js"></script>
<script>
function snow() {
//1、定义一片雪花模板
var flake = $("<div>").css({
"position": "absolute",
"color": "#fff"
}).html("❄");
//获取页面的宽度，利用这个数来算出，雪花开始时left的值
var documentWidth = $(document).width();
//获取页面的高度 相当于雪花下落结束时Y轴的位置
var documentHieght = $(document).height();
//定义生成一片雪花的毫秒数
var millisec = 100;
//2、设置第一个定时器，周期性定时器，每隔一段时间（millisec）生成一片雪花；
setInterval(function() {
//随机生成雪花下落 开始 时left的值，相当于开始时X轴的位置
var startLeft = Math.random() * documentWidth;
//随机生成雪花下落 结束 时left的值，相当于结束时X轴的位置
var endLeft = Math.random() * documentWidth;
//随机生成雪花大小
var flakeSize = 5 + 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();
//3、克隆一个雪花模板,定义雪花的初始样式，拼接到页面中
flake.clone().appendTo($("body")).css({
"left": startLeft,
"opacity": startOpacity,
"font-size": flakeSize,
"top": "-25px",
}).animate({ //执行动画
"left": endLeft,
"opacity": endOpacity,
"top": documentHieght
}, durationTime, function() {
//4、当雪花落下后，删除雪花。
$(this).remove();
});
}, millisec);
};
snow();
</script>
</body>
</html>