2023跨年倒计时代码来了！

女爷i 2023-10-03 22:47 58阅读 0赞

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

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

![d40eac061310288a5604ebbf02e11a44.gif][]

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

![ab626f173445cdd92f22d7345096de10.png][]

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

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

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

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

function calculateRemainingTime() {
      const comingYear = new Date().getFullYear() + 1;
      // const comingDate = new Date(`Jan 1, ${comingYear} 00:00:00`);
      // const comingDate = new Date(`Dec 29, 2022 09:20:30`);
      const comingDate = new Date(daojishi);
    
      const now = new Date();
      const remainingTime = comingDate.getTime() - now.getTime();
      const days = Math.floor(remainingTime / (1000 * 60 * 60 * 24));
      const hours = Math.floor((remainingTime % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
      const mins = Math.floor((remainingTime % (1000 * 60 * 60)) / (1000 * 60));
      const secs = Math.floor((remainingTime % (1000 * 60)) / 1000);
    
      d.innerHTML = getTrueNumber(days);
      hhh.innerHTML = getTrueNumber(hours);
      m.innerHTML = getTrueNumber(mins);
      s.innerHTML = getTrueNumber(secs);
    
      return remainingTime;
    }

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

function initCountdown() {
      const interval = setInterval(() => {
        const remainingTimeInMs = calculateRemainingTime();
        console.log("remainingTimeInMs=", remainingTimeInMs)
        if (remainingTimeInMs <= 0 && flagg == false) {
          flagg = true;
          goNextStep();
          return;
        }
    
        if (remainingTimeInMs <= 1000) {
          clearInterval(interval);
          initCountdown();
        }
      }, 1000);
    }

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

function goNextStep() {
      snow.canvas.remove();
      const bbody = document.getElementById("bbody");
      bbody.innerHTML = "<h1 id=h1h1h1>"+zhufuyu+"</h1><canvas id=canvas></canvas>";
      var h1h1h1 = document.getElementById("h1h1h1");
      var font_size = "1000%";
      if (zhufuyu.length <=5) {
        font_size = "800%";
      } else if (zhufuyu.length <=8) {
        font_size = "600%";
      } else if (zhufuyu.length <=12) {
        font_size = "500%";
      } else if (zhufuyu.length <=15) {
        font_size = "400%";
      } else if (zhufuyu.length <=20) {
        font_size = "200%";
      } else if (zhufuyu.length <=30) {
        font_size = "100%";
      } else {
        font_size = "80%";
      }
      h1h1h1.style.setProperty("font-size", font_size)
      dedede();
    }

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

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

[d40eac061310288a5604ebbf02e11a44.gif]: https://img-blog.csdnimg.cn/img_convert/d40eac061310288a5604ebbf02e11a44.gif
[ab626f173445cdd92f22d7345096de10.png]: https://img-blog.csdnimg.cn/img_convert/ab626f173445cdd92f22d7345096de10.png