2种简单的js倒计时方式

下面是“2种简单的js倒计时方式”的完整攻略，可以帮助网页作者快速实现倒计时功能。

1. 使用setInterval函数

原理

倒计时的原理基本上是每隔一段时间执行一次代码，去减小剩余的时间，并打印出更新后的倒计时。setInterval函数可以用来每隔指定的时间执行一段代码。

实现方法

首先，需要在html代码中定义一个显示倒计时的元素，例如：

<p id="timer">倒计时：00:00:00</p>

然后在js代码中使用setInterval函数每秒执行一次倒计时：

//设置倒计时截止时间，可以设置为任何未来的时间
const deadline="May 30 2022 10:00:00 GMT+0200";

function getTimeRemaining(endtime){

  //得到倒计时剩余时间的毫秒数
  const total = Date.parse(endtime) - Date.parse(new Date());

  //计算剩余时间的天、小时、分钟和秒数
  const days = Math.floor(total / (1000 * 60 * 60 * 24));
  const hours = Math.floor((total / (1000 * 60 * 60)) % 24);
  const minutes = Math.floor((total / 1000 / 60) % 60);
  const seconds = Math.floor((total / 1000) % 60);

  //返回计算结果
  return {
    total,
    days,
    hours,
    minutes,
    seconds
  };
}

function initializeClock(id, endtime){
  const clock = document.getElementById(id);
  const daysSpan = clock.querySelector('.days');
  const hoursSpan = clock.querySelector('.hours');
  const minutesSpan = clock.querySelector('.minutes');
  const secondsSpan = clock.querySelector('.seconds');

  function updateClock(){
    const t = getTimeRemaining(endtime);

    //将计算出来的时间更新到倒计时元素中
    daysSpan.innerHTML = t.days;
    hoursSpan.innerHTML = ('0' + t.hours).slice(-2);
    minutesSpan.innerHTML = ('0' + t.minutes).slice(-2);
    secondsSpan.innerHTML = ('0' + t.seconds).slice(-2);

    //判断倒计时是否结束，如果结束则清除计时器
    if (t.total <= 0) {
      clearInterval(timeinterval);
    }
  }

  //先执行一次更新，然后每隔1秒更新一次计时器
  updateClock();
  const timeinterval = setInterval(updateClock, 1000);
}

//通过初始化函数启动计时器并设置id和截止时间
initializeClock('timer', deadline);

这段代码可以实现一个简单的倒计时，每隔一秒自动更新，当倒计时结束时就会停止计时器，并在倒计时元素中显示“0:0:0”。

示例说明

按照上述代码实现后，可以在网页上看到如下倒计时效果：

2. 使用setTimeout函数

原理

setTimeout函数与setInterval函数有些类似，都可以用来执行一段代码。不同的是，setTimeout函数只执行一次代码，并且需要设置一个时间参数告诉代码过多少时间后执行。

实现方法

与上述代码类似，需要在html代码中定义一个显示倒计时的元素，例如：

<p id="timer2">倒计时2：00:00:00</p>

然后在js代码中使用setTimeout函数执行倒计时：

const deadline2 = new Date("May 30, 2022 10:00:00").getTime();

function countdown() {
  const now = new Date().getTime();
  const distance = deadline2 - now;

  if (distance < 0) {
    clearInterval(timeinterval2);
    document.getElementById("timer2").innerHTML = "EXPIRED";
    return;
  }

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

  document.getElementById("timer2").innerHTML = days + "d " + hours + "h "
  + minutes + "m " + seconds + "s ";
}

const timeinterval2 = setInterval(countdown, 1000);

代码使用了一个countdown函数计算剩余时间并更新到倒计时元素中。在倒计时元素中当时间到0后，会显示“EXPIRED”。

示例说明

按照上述代码实现后，可以在网页上看到如下倒计时效果：