2023跨年倒计时代码来了！

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

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

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

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

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

其实这是两个页面的代码，但是只使用了一个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组合起来，比如倒计时后播放烟花，点击页面后打开礼物等。