简单说 JavaScript实现雪花飘落效果

深藏阁楼爱情的钟 2022-06-05 11:05 693阅读 0赞

### 说明 ###

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

### 效果图 ###

![这里写图片描述][20171125160422615]

### 解释 ###

**setTimeout()**  
setTimeout函数用来指定某个函数或某段代码，在多少毫秒之后执行。它返回一个整数，表示定时器的编号，以后可以用来取消这个定时器。

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 必须要等到当前脚本的同步任务和“任务队列”中已有的事件，全部处理完以后，才会执行setTimeout指定的任务。

这里就不细说 setTimeout 和 setInterval的概念了 ，  
想详细了解的请看[这里，定时器][Link 1]

我们继续说实现雪花飘落的效果  
**主要是以下4步：**  
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: 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代码都执行完之后才渲染页面，这样的话后面的样式就直接覆盖前面的样式了，雪花就没法动了，这和浏览器的线程有关系。

简单说，意思就是用了这个定时器，能把两次修改样式的代码分开执行，可以先把第一次修改的样式渲染后，在进行第二次的修改，雪花就会动了。

如果想了解更详细的东西推荐看看下面的文章  
[js setTimeOut()][js setTimeOut]  
[原来 CSS 与 JS 是这样阻塞 DOM 解析和渲染的][CSS _ JS _ DOM]  
[哪些地方会出现css阻塞，哪些地方会出现js阻塞？][css_js]  
[浏览器~加载，解析，渲染][Link 2]

### 总结 ###

这次实现的雪花飘落效果，要说麻烦的地方，就是第二个定时器那里了，为什么用了这个定时器就能让雪花动起来，文中只是简单的说了一下，更加详细的还是看看推荐的那几篇文章吧！不过在这之前，要先弄明白定时器是怎么回事才可以。  
不明白定时器看[这里，定时器][Link 1]  
不明白为什么用第二个定时器看这几篇文章  
[js setTimeOut()][js setTimeOut]  
[原来 CSS 与 JS 是这样阻塞 DOM 解析和渲染的][CSS _ JS _ DOM]  
[哪些地方会出现css阻塞，哪些地方会出现js阻塞？][css_js]  
[浏览器~加载，解析，渲染][Link 2]

### 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>

[20171125160422615]: /images/20220605/d85747d67f2c40b5a13e58a1fd4f6cba.png
[Link 1]: http://javascript.ruanyifeng.com/advanced/timer.html#toc0
[js setTimeOut]: http://www.cnblogs.com/yelongsan/p/6296700.html
[CSS _ JS _ DOM]: http://www.cnblogs.com/kuangke/p/7590507.html
[css_js]: http://blog.csdn.net/qiphon3650/article/details/78038266
[Link 2]: http://www.jianshu.com/p/e141d1543143