2023跨年倒计时代码来了

2023年就要到了，你准备好跨年了吗？

阿圆为大家准备了一个跨年倒计时的代码，来看看吧。

代码提供了在线使用的方式，访问 www.zoushen955.com/2023，即可使用在线方式，还可以输入要说的话，将生成的链接发给别人，和别人一起倒计时。

所有源码文件关注公众号【走神研究所】，发送 “跨年”获取所有代码。

下面简单介绍下代码逻辑。

其实这是两个页面的代码，但是只使用了一个html文件，方法是当倒计时结束的时候播放第二个页面的js代码就可以了。

第一个倒计时逻辑简单，设定一个时间，比如2023年1月1日0点0分0秒，不断计算当前时间和倒计时的差值，计算剩余的天数、小时数等，刷新在页面上。代码如下：

1.  
   function calculateRemainingTime() {
2.  
     const comingYear = new Date().getFullYear() 1;
3.  
     // const comingDate = new Date(`Jan 1, ${comingYear} 00:00:00`);
4.  
     // const comingDate = new Date(`Dec 29, 2022 09:20:30`);
5.  
     const comingDate = new Date(daojishi);
6.  
    
7.  
     const now = new Date();
8.  
     const remainingTime = comingDate.getTime() - now.getTime();
9.  
     const days = Math.floor(remainingTime / (1000 * 60 * 60 * 24));
10.  
      const hours = Math.floor((remainingTime % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
11.  
      const mins = Math.floor((remainingTime % (1000 * 60 * 60)) / (1000 * 60));
12.  
      const secs = Math.floor((remainingTime % (1000 * 60)) / 1000);
13.  
     
14.  
      d.innerHTML = getTrueNumber(days);
15.  
      hhh.innerHTML = getTrueNumber(hours);
16.  
      m.innerHTML = getTrueNumber(mins);
17.  
      s.innerHTML = getTrueNumber(secs);
18.  
     
19.  
      return remainingTime;
20.  
    }

当倒计时结束的时候，要执行goNextstep()方法，将之前的canvas动画关闭，开始播放新的动画。注意这里为了避免多次执行函数，使用了一个flag来标志。

1.  
   function initCountdown() {
2.  
     const interval = setInterval(() => {
3.  
       const remainingTimeInMs = calculateRemainingTime();
4.  
       console.log("remainingTimeInMs=", remainingTimeInMs)
5.  
       if (remainingTimeInMs <= 0 && flagg == false) {
6.  
         flagg = true;
7.  
         goNextStep();
8.  
         return;
9.  
       }
10.  
     
11.  
        if (remainingTimeInMs <= 1000) {
12.  
          clearInterval(interval);
13.  
          initCountdown();
14.  
        }
15.  
      }, 1000);
16.  
    }

goNextStep方法主要作用是关闭第一个倒计时动画的canvas播放，以及清空当前页面的元素。并开始执行第二个动画相关的函数dedede()

1.  
   function goNextStep() {
2.  
     snow.canvas.remove();
3.  
     const bbody = document.getElementById("bbody");
4.  
     bbody.innerHTML = "<h1 id=h1h1h1>" zhufuyu "</h1><canvas id=canvas></canvas>";
5.  
     var h1h1h1 = document.getElementById("h1h1h1");
6.  
     var font_size = "1000%";
7.  
     if (zhufuyu.length <=5) {
8.  
       font_size = "800%";
9.  
     } else if (zhufuyu.length <=8) {
10.  
        font_size = "600%";
11.  
      } else if (zhufuyu.length <=12) {
12.  
        font_size = "500%";
13.  
      } else if (zhufuyu.length <=15) {
14.  
        font_size = "400%";
15.  
      } else if (zhufuyu.length <=20) {
16.  
        font_size = "200%";
17.  
      } else if (zhufuyu.length <=30) {
18.  
        font_size = "100%";
19.  
      } else {
20.  
        font_size = "80%";
21.  
      }
22.  
      h1h1h1.style.setProperty("font-size", font_size)
23.  
      dedede();
24.  
    }

第二个动画就比较简单了。

至于倒计时和最后播放的彩带动画，都是在codepen上找的demo，有兴趣的小伙伴儿也可以自己找几个demo组合起来，比如倒计时后播放烟花，点击页面后打开礼物等。