很多朋友在做特效网页的时候需要用到雪花飘落的效果。在这里，我们分别整理了用JS和JQuery实现这种效果的方法。

我们先来看看需要实现的雪花效应：

雪花飘落的效果很简单，主要是为了在JavaScript中练习定时器、setTimeout和setInterval。

解释

setTimeout()

SetTimeout函数用于指定函数或一段代码执行后的毫秒数。它返回一个整数，表示计时器的数量，可用于以后取消计时器。

vartimerid=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)；cleartime out(id1)；clearInterval(id2)；注意：

setTimeout和setInterval必须等到当前脚本的同步任务和任务队列中的现有事件都处理完毕后，才能执行SetTimeout指定的任务。

让我们继续谈论实现降雪的效果

主要有以下四个步骤：

1.定义雪花模板；2.设置第一个计时器，周期性计时器，以定期生成雪花；3.设置第二个定时器，一次性定时器。当第一个计时器生成雪花并在页面上渲染时，修改雪花的样式使其移动；4.设置第三个定时器，当雪花落下时删除它。

以上是实现思路，下面是具体代码。下面的代码是JS原生代码，最后会附上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:隐藏；}/style/headbody脚本函数snow () {//1，定义一个雪花模板var flare=document . create element(' div ')；//雪花字符flake.innerHTML=flake . style . CSS text=' position : absolute；color: # fff；//获取等于雪花落下结束时y轴位置的页面高度。var文档高度=window.innerheight//获取页面的宽度，用这个数字计算雪花开头的left值：vardocument width=window . inner width；//定义生成雪花var毫秒=100的毫秒数；//2.设置第一定时器、周期定时器，每隔一段时间(毫秒)生成一片雪花；SetInterval(函数(){//页面加载后，计时器开始工作。//随机生成雪花飘落开始时左边的值，相当于开始时X轴的位置：var start left=math。random () *文档宽度；//随机生成雪花落末的left值，相当于x轴在末的位置：var end left=math . random()* document width；//随机生成雪花大小var flakeSize=5 20 * math . random()；//随机生成雪花下落持续时间var持续时间=4000 7000 * math . random()；//雪花飘落开始随机生成透明度var开始不透明度=0.70.3 * math . random()；//随机生成雪花落下结束时的透明度。var end不透明度=0 . 20 . 2 * math . random()；//克隆一个雪花模板varclone flare=flare . clone node(true)；//第一次修改样式，定义克隆的雪花样式cloneflag . style . CSS text=` left : $ { startleft } px；opa city 3360 $ { startOpacity }；font-size : $ { Flakesize } px；top :-25px；transition: $ { durationTime }毫秒；`;//拼接到page document.body.appendchild(克隆flare)；//设置第二定时器和一次性定时器。//第一个计时器生成雪花并在页面上渲染后，修改雪花的样式使其移动；SetTimeout(function() {//第二次修改样式cloneflag . style . CSS text=` left : $ { end left } px；top: $ { documentHieght } pxopacity: $ {内生能力}；`;//4.设置第三个定时器，当雪花落下时删除它。setTimeout(function(){ cloneflake . remove()；}，durationTime)；}, 0);}，毫秒)；} snow()；/script/body/htmlnote:

计时器添加的事件将在下一个Event Loop中执行，所以第二个计时器用于使生成的雪花拼接到页面中并呈现，然后修改其样式，从而使其移动。没有这个定时器，浏览器在渲染页面前会执行所有JS代码，这样后面的样式直接覆盖了前面的样式，雪花就不能动了，这和浏览器线程有关。

简单来说，就是用这个定时器，可以分别执行两次修改样式的代码。渲染第一个修改的样式后，雪花会在第二个修改后移动。

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:隐藏；}/style/head body脚本src=' http :https://cdn。bootscs。com/jquery/3。2 .1/jquery。js '/script脚本函数snow(){//1，定义一片雪花模板var flake=$('div ').css({ 'position': 'absolute '，' color': '#fff' })。html(" ")；//获取页面的宽度，利用这个数来算出，雪花开始时左边的的值var documentWidth=$(文档)。宽度();//获取页面的高度相当于雪花下落结束时Y轴的位置var documentHieght=$(文档)。高度();//定义生成一片雪花的毫秒数定义变量毫秒=100;//2、设置第一个定时器，周期性定时器，每隔一段时间（毫秒)生成一片雪花；setInterval(函数(){ //随机生成雪花下落开始时左边的的值，相当于开始时X轴的位置var startLeft=数学。random()*文档宽度；//随机生成雪花下落结束时左边的的值，相当于结束时X轴的位置var endLeft=数学。random()*文档宽度；//随机生成雪花大小var flakeSize=5 20 *数学。random()；//随机生成雪花下落持续时间var durationTime=4000 7000 *数学。random()；//随机生成雪花下落开始时的透明度var startOpacity=0.7 0.3 *数学。random()；//随机生成雪花下落结束时的透明度定义变量内生能力=0.2 0.2 *数学。random()；//3、克隆一个雪花模板，定义雪花的初始样式，拼接到页面中flake.clone().appendo($(“body”).css({ 'left': startLeft，' opacity': startOpacity，' font-size': flakeSize，' top': '-25px '，}).动画({ //执行动画left': endLeft，' opacity ' :' top ' : documentHieght }、durationTime、function() { //4、当雪花落下后，删除雪花$(这个)。移除();});},毫秒);};snow()；/脚本/正文/html