❉ 原生js实现2021新年倒计时特效，当然了，可以修改成任意节日日子的倒计时，只需修改截止时间即可。

这篇文章主要为大家详细介绍了JavaScript实现新年倒计时效果，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
一年又一年，新年又快到了，最近大家又开始抢回家过年的车票了，我们就来算一算离新年还有多少天，
总结总结在即将过去的2020年大家都收获了什么？
本文实例讲述了js实现新年倒计时效果代码。分享给大家供大家参考。

❉运行效果图一：

在这里插入图片描述

❉运行效果图二：

在这里插入图片描述

❉代码如下:

<html>
  <head>
    <meta charset="utf-8" />
    <script
      id="jqbb"
      src="https://libs.baidu.com/jquery/1.11.1/jquery.min.js"
    ></script>

    <style type="text/css">
      @import url("https://fonts.googleapis.com/css?family=Aleo");
      :root {
     
     
        font-family: "Aleo", sans-serif;
      }

      html,
      body {
     
     
        width: 100%;
        height: 100%;
        padding: 0;
        margin: 0;
        background: rgb(119, 13, 13);
        background: radial-gradient(
          circle,
          rgba(119, 13, 13, 0.92) 64%,
          rgba(0, 0, 0, 0.6) 100%
        );
      }

      canvas {
     
     
        width: 100%;
        height: 100%;
      }
      .label {
     
     
        font-size: 2.2rem;
        background-clip: text;
        -webkit-background-clip: text;
        color: transparent;
        animation: moveBg 30s linear infinite;
      }

      @keyframes moveBg {
     
     
        0% {
     
     
          background-position: 0% 30%;
        }
        100% {
     
     
          background-position: 1000% 500%;
        }
      }

      .middle {
     
     
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        text-align: center;
        user-select: none;
      }

      .time {
     
     
        color: #d99c3b;
        text-transform: uppercase;
        display: flex;
        justify-content: center;
      }

      .time span {
     
     
        padding: 0 14px;
        font-size: 0.8rem;
      }

      .time span div {
     
     
        font-size: 3rem;
      }
      }
    </style>
  </head>

  <body>
    <div class="middle">
      <h1 class="label">New Year Countdown</h1>
      <div class="time">
        <span>
          <div id="LeftTime"></div>
        </span>
      </div>
    </div>
  </body>

</html>
...
完整代码在下方↓公众号获取

  <script>
    class Snowflake {
    
    
      constructor() {
    
    
        this.x = 0;
        this.y = 0;
        this.vx = 0;
        this.vy = 0;
        this.radius = 0;
        this.alpha = 0;

        this.reset();
      }

      reset() {
    
    
        this.x = this.randBetween(0, window.innerWidth);
        this.y = this.randBetween(0, -window.innerHeight);
        this.vx = this.randBetween(-3, 3);
        this.vy = this.randBetween(2, 5);
        this.radius = this.randBetween(1, 4);
        this.alpha = this.randBetween(0.1, 0.9);
      }

      randBetween(min, max) {
    
    
        return min + Math.random() * (max - min);
      }

      update() {
    
    
        this.x += this.vx;
        this.y += this.vy;

        if (this.y + this.radius > window.innerHeight) {
    
    
          this.reset();
        }
      }
    }

    class Snow {
    
    
      createSnowflakes() {
    
    
        const flakes = window.innerWidth / 4;

        this.snowflakes = [];

        for (let s = 0; s < flakes; s++) {
    
    
          this.snowflakes.push(new Snowflake());
        }

      }
    }

    new Snow();

    /新年倒计时//

    function FreshTime() {
    
    
      var endtime = new Date("2021/2/12,00:00:00"); //结束时间
      var nowtime = new Date(); //当前时间
      var lefttime = parseInt((endtime.getTime() - nowtime.getTime()) / 1000);
      d = parseInt(lefttime / (24 * 60 * 60));
      document.getElementById("LeftTime").innerHTML =
        d + "天 \t\t" + h + "小时 \t\t" + m + "分 \t\t" + s + "秒";
     
    }
    FreshTime();
    var sh;
    sh = setInterval(FreshTime, 1000);
  </script>
完整代码在下方↓公众号获取