So implementieren Sie einen Countdown-Timer in js-js-Tutorial-php.cn

So implementieren Sie einen Countdown-Timer in js

下次还敢

Freigeben： 2024-05-01 04:18:19

Original

1066 Leute haben es durchsucht

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

So implementieren Sie einen Countdown-Timer in js

JS中倒计时器的实现

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

1. setInterval() 方法

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

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

2. setTimeout() 方法

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

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

示例代码 (setInterval() 方法)

<code>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);</code>

Nach dem Login kopieren

示例代码 (setTimeout() 方法)

<code>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 小时</code>

Nach dem Login kopieren

Das obige ist der detaillierte Inhalt vonSo implementieren Sie einen Countdown-Timer in js. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!