JS倒计时

149 阅读1分钟

原理

   写这篇文章原理非常简单,首先获取两个时间戳的差,之后根据时分秒转换公式将求出的值赋给元素innerHTML,最后设置1000ms定时器不断刷新即可。

      /* 倒计时 */
    (function (doc) {
      const hour = doc.querySelector('#hour');
      const minutes = doc.querySelector('#minutes');
      const second = doc.querySelector('#second');

      function getDate() {
        const now = new Date();
        const last = new Date('2023/4/25 23:00:00');

        const end = (last - now) / 1000;

        let h = Math.max(Math.floor(end / 60 / 60 % 24), 0) + '';
        h = h < 10 ? '0' + h : h;
        let m = Math.max(Math.floor(end / 60 % 60), 0) + '';
        m = m < 10 ? '0' + m : m;
        let s = Math.max(Math.floor(end % 60), 0) + '';
        s = s < 10 ? '0' + s : s;
        
        hour.innerHTML = h;
        minutes.innerHTML = m;
        second.innerHTML = s;

        console.log(`
>倒计时
  -hour: ${hour.innerHTML};
  -minutes: ${minutes.innerHTML};
  -second: ${second.innerHTML};
          `);
      }
      getDate();

      setInterval(getDate, 1000);
    })(document);