关键词

最全面的JS倒计时代码

下面是关于“最全面的JS倒计时代码”的完整攻略:

1. 倒计时的实现原理

倒计时的实现原理是利用 JavaScript 中的定时器 setInterval(),根据设置的时间间隔,每隔一定时间执行一次函数,实现倒计时效果。具体操作如下:

// 设置时间
let countDownTime = new Date('2021/12/31 23:59:59').getTime();

let countDown = setInterval(() => {
  // 获取当前时间
  let now = new Date().getTime();

  // 计算剩余时间
  let distance = countDownTime - now;

  // 计算剩余时间的各个部分
  let days = Math.floor(distance / (1000 * 60 * 60 * 24));
  let hours = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
  let minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
  let seconds = Math.floor((distance % (1000 * 60)) / 1000);

  // 在页面上显示剩余时间
  document.getElementById('countdown').innerHTML = days + "天 " + hours + "小时 "
  + minutes + "分钟 " + seconds + "秒";

  // 倒计时结束后清除计时器
  if (distance < 0) {
    clearInterval(countDown);
    document.getElementById('countdown').innerHTML = "倒计时已结束";
  }
}, 1000);

2. 根据需求设置倒计时

根据自己的需求设置倒计时,可以设置倒计时截止时间、倒计时结束后的提示等,示例代码如下:

let countDownTime = new Date('2022/01/01 00:00:00').getTime();

let countDown = setInterval(() => {
  let now = new Date().getTime();
  let distance = countDownTime - now;

  let days = Math.floor(distance / (1000 * 60 * 60 * 24));
  let hours = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
  let minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
  let seconds = Math.floor((distance % (1000 * 60)) / 1000);

  document.getElementById('countdown').innerHTML = days + "天 " + hours + "小时 "
  + minutes + "分钟 " + seconds + "秒";

  if (distance < 0) {
    clearInterval(countDown);
    document.getElementById('countdown').innerHTML = "Happy New Year!";
  }
}, 1000);

以上是“最全面的JS倒计时代码”的完整攻略,希望对您有所帮助。

本文链接:http://task.lmcjl.com/news/9154.html

展开阅读全文