demo：js简单模拟雪花飘落效果

最新推荐文章于 2022-11-15 18:35:16 发布

昵称查重

最新推荐文章于 2022-11-15 18:35:16 发布

阅读量459

点赞数

分类专栏：前端 css js 文章标签： html5 css css3 javascript

原文链接：https://segmentfault.com/a/1190000012225458

版权

前端同时被 3 个专栏收录

5 篇文章 0 订阅

订阅专栏

3 篇文章 0 订阅

订阅专栏

css

2 篇文章 0 订阅

订阅专栏

js模拟雪花飘落特效

本demo主要练习对js中定时器的理解。

效果图：

效果图

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

var timer = setTimeout(func|code, delay)

上面代码中，setTimeout函数接受两个参数，第一个参数func|code是将要推迟执行的函数名或者一段代码，第二个参数delay是推迟执行的毫秒数。

2、setInterval()
setInterval函数的用法与setTimeout相似，区别仅在于setInterval指定某个任务每隔一段时间就执行一次，也就是无限次的定时执行。

3、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的概念了，
想详细了解的请看这里定时器详细介绍

我们继续说实现雪花飘落的效果
主要是以下4步：
1、定义一片雪花模板；
2、设置第一个定时器，周期性定时器，每隔一段时间生成一片雪花；
3、设置第二个定时器，一次性定时器，当第一个定时器生成雪花，并在页面上渲染出来后，修改雪花的样式，让雪花动起来；
4、设置第三个定时器，当雪花落下后，删除雪花。

附代码如下：

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>

  <style>
    body {
      background-color: #000;
      overflow: hidden;
    }
  </style>
</head>
<body>
  <script>
    //定义一片雪花模板
    function snows() {
      var snow = document.createElement('div');
      snow.innerHTML = "❄";
      snow.style.color = "#fff";
      snow.style.position = "absolute";

      //获取页面宽度和高度
      var W = window.innerWidth;
      var H = window.innerHeight;

      //开启一个定时器，每隔一段时间生成一片雪花
      var timer = setInterval(function () {
        //定义雪花出生的位置
        var start = Math.random() * W;

        //定义雪花结束的位置
        var finish = Math.random() * W;

        //定义每片雪花的大小
        var snowSize = 10 + Math.random() * 20;

        //定义雪花下落的时间
        var duringTime = 20000;

        //雪花旋转
        var rotate = 60 + Math.random() * 360;

        //克隆一个雪花模板
        var cloneSnow = snow.cloneNode(true);

        //改变新生成的雪花的样式
        cloneSnow.style.cssText += `left:${start}px;font-size:${snowSize}px;top:-25px;transition:${duringTime}ms`;

        //添加到页面中
        document.body.appendChild(cloneSnow);

        //生成一个一次性定时器，改变结束时的样式
        var timer1 = setTimeout(function () {
          cloneSnow.style.cssText += `left:${finish}px;top:${H}px;transform:rotateX(${rotate}deg)`;

          //开启一个一次性定时器清除落地的雪花
          setTimeout(function () {
            cloneSnow.remove();
          }, duringTime)
        }, 0)
      }, 100)
    }
    //调用函数
    snows();
  </script>
</body>

</html>