首頁 >web前端 >js教程 >js中倒數計時器怎麼實現

js中倒數計時器怎麼實現

下次还敢
下次还敢原創
2024-05-01 04:18:191040瀏覽

JavaScript 中有兩種方法實作倒數計時器:setInterval():建立計時器,每隔一指定毫秒重複呼叫函數。 setTimeout():只呼叫一次函數,延遲指定時間。

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>

範例程式碼 (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>

以上是js中倒數計時器怎麼實現的詳細內容。更多資訊請關注PHP中文網其他相關文章!

陳述:
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn