js中倒计时器怎么实现-js教程-PHP中文网

js中倒计时器怎么实现

下次还敢

发布： 2024-05-01 04:18:19

原创

1531人浏览过

JavaScript 中有两种方法实现倒计时器：setInterval()：创建定时器，每隔指定毫秒重复调用函数。setTimeout()：仅调用一次函数，延迟指定时间。

js中倒计时器怎么实现

JS中倒计时器的实现

在JavaScript中，有几种方法可以实现倒计时器。以下两种方法是常用的：

1. setInterval() 方法

setInterval() 方法创建一个定时器，它以指定的毫秒数重复调用一个函数。要使用 setInterval() 方法实现倒计时器，请按以下步骤操作：

定义一个函数来更新倒计时。该函数应将当前时间与目标时间进行比较，并显示剩余时间。
计算剩余时间的毫秒数。
使用 setInterval() 方法每隔一定的毫秒数调用更新函数。
当倒计时结束时，清除 setInterval 定时器。

2. setTimeout() 方法

setTimeout() 方法仅调用一次函数，延迟指定的时间。要使用 setTimeout() 方法实现倒计时器，请按以下步骤操作：

定义一个递归函数来更新倒计时。该函数应将当前时间与目标时间进行比较，并显示剩余时间。
在函数中，计算剩余时间的毫秒数。
使用 setTimeout() 方法在剩余时间后调用该函数。

示例代码 (setInterval() 方法)

function updateCountdown() {
  const targetTime = new Date('2023-12-31');
  const currentTime = new Date();
  const msToTarget = targetTime - currentTime;
  const msToHours = Math.floor(msToTarget / (1000 * 60 * 60));
  const msToMinutes = Math.floor(msToTarget / (1000 * 60)) % 60;
  const msToSeconds = Math.floor(msToTarget / 1000) % 60;
  const countdownDisplay = document.getElementById('countdown');
  countdownDisplay.innerHTML = `${msToHours}:${msToMinutes}:${msToSeconds}`;
  if (msToTarget <= 0) {
    clearInterval(timeoutID);
  }
}

const timeoutID = setInterval(updateCountdown, 1000);

登录后复制

示例代码 (setTimeout() 方法)

function countdown(ms) {
  const targetTime = Date.now() + ms;
  const countdownDisplay = document.getElementById('countdown');
  const update = () => {
    const msRemaining = targetTime - Date.now();
    if (msRemaining <= 0) {
      return;
    }
    const msToHours = Math.floor(msRemaining / (1000 * 60 * 60));
    const msToMinutes = Math.floor(msRemaining / (1000 * 60)) % 60;
    const msToSeconds = Math.floor(msRemaining / 1000) % 60;
    countdownDisplay.innerHTML = `${msToHours}:${msToMinutes}:${msToSeconds}`;
    setTimeout(update, 1000);
  }
  update();
}

countdown(3600000);  // 1 小时

登录后复制

以上就是js中倒计时器怎么实现的详细内容，更多请关注php中文网其它相关文章！