JavaScript 中的倒數計時器

  2. 貼士文章
  3. JavaScript 貼士
  4. JavaScript 中的倒數計時器
Nithin Krishnan 2023年10月12日
JavaScript JavaScript Timer
  1. JavaScript 中的到時計時器示例程式碼
  2. JavaScript 中的倒數計時器程式碼的說明
JavaScript 中的倒數計時器

這篇文章將為你提供一種使用 JavaScript 建立倒數計時器的簡便方法。

下面是一個一分半鐘的計時器的程式碼。

<h1 class="text-center" id="count-down-timer"></h1>

function paddedFormat(num) {
  return num < 10 ? '0' + num : num;
}

function startCountDown(duration, element) {
  let secondsRemaining = duration;
  let min = 0;
  let sec = 0;

  let countInterval = setInterval(function() {
    min = parseInt(secondsRemaining / 60);
    sec = parseInt(secondsRemaining % 60);

    element.textContent = `${paddedFormat(min)}:${paddedFormat(sec)}`;

    secondsRemaining = secondsRemaining - 1;
    if (secondsRemaining < 0) {
      clearInterval(countInterval)
    };
  }, 1000);
}

window.onload = function() {
  let time_minutes = 1;   // Value in minutes
  let time_seconds = 30;  // Value in seconds

  let duration = time_minutes * 60 + time_seconds;

  element = document.querySelector('#count-down-timer');
  element.textContent =
      `${paddedFormat(time_minutes)}:${paddedFormat(time_seconds)}`;

  startCountDown(--duration, element);
};

JavaScript 中的到時計時器示例程式碼

  • 設定計時器的 HTML 標籤

    在上面的程式碼中，<h1> 標籤保留計時器顯示。在你的網頁 HTML 中使用此程式碼。由於在 JavaScript 中使用 count-down-timer id 訪問元素時需要 id="count-down-timer"，以便在執行時動態更改元素文字。

    <h1 class="text-center" id="count-down-timer"></h1>
  • 設定計時器值

    標籤到位後，下一步就是設定計數時間值。通常，網頁使用內建在其程式碼中的硬編碼時間，該時間不可自定義。你可以在 window.onload 方法中以 time_minutes 和 time_seconds 設定計時器。例如，如果你希望將計時器設定為一個半分鐘，則按如下所示設定程式碼：

    let time_minutes = 1;   // Value in minutes
let time_seconds = 30;  // Value in seconds

    如果希望設定為 3 分鐘，則設定 time_minutes = 3 並保留 time_seconds = 0。現在，一旦你執行程式碼或重新載入 HTML，就可以獲取更新的輸出。

JavaScript 中的倒數計時器程式碼的說明

  • 執行從 window.onload 函式開始。它採用你設定的計時器值，並計算總的持續時間（以秒為單位）。
    let time_minutes = 1;   // Value in minutes
let time_seconds = 30;  // Value in seconds

let duration = time_minutes * 60 + time_seconds;
  • document.querySelector('#count-down-timer') 獲取元素的 HTML 節點。該節點將用於重新整理計時器值。
    element = document.querySelector('#count-down-timer');
  • 元素可用後，將使用我們設定的值進行初始化。例如，在程式碼中是 1 分 30 秒。它以填充格式設定。
    function paddedFormat(num) {
  return num < 10 ? '0' + num : num;
}

console.log(paddedFormat(3));
console.log(paddedFormat(12));

    輸出：

    03
12
  • pappedFormat(num) 函式返回填充的數字。在數分鐘和數秒內，通過為數字值加上字首 0 來填充它們。例如，將 2 分鐘和 5 秒分別填充為 02 和 05。
    element.textContent =
    `${paddedFormat(time_minutes)}:${paddedFormat(time_seconds)}`;
  • 接下來，我們呼叫 startCountDown(--duration, element) 函式，以秒為單位傳遞 duration 以及 display 元素的 HTML 節點。我們現在顯示值 01:30。因此，我們需要計時器從 01:29 開始。這就是為什麼我們使用持續時間為 --duration 的減一元運算子的原因。
    startCountDown(--duration, element);
  • startCountDown(duration, element) 是計時器的核心。在此，我們使用 JavaScript 的 setInterval(function(){}, 1000) 函式在每秒（1000 毫秒）後執行計時器，直到使用 clearInterval(countInterval) 將其清除或終止。
    function startCountDown(duration, element) {
  let secondsRemaining = duration;
  let min = 0;
  let sec = 0;

  let countInterval = setInterval(function() {
    min = parseInt(secondsRemaining / 60);
    sec = parseInt(secondsRemaining % 60);

    element.textContent = `${paddedFormat(min)}:${paddedFormat(sec)}`;

    secondsRemaining = secondsRemaining - 1;
    if (secondsRemaining < 0) {
      clearInterval(countInterval)
    };
  }, 1000);
}
  • 在 setinterval() 函式內部，計算了顯示的分鐘和秒數。通過將 remainingSeconds 值除以 60 得到分鐘值並取其整數部分來計算分鐘。
    let secondsRemaining = 89;
let min = parseInt(secondsRemaining / 60);
let sec = parseInt(secondsRemaining % 60);

console.log(secondsRemaining + 'seconds');
console.log(min);
console.log(sec);

    輸出：

    89  // Equivalent to 1 min and 29 seconds
1
29
  • 接下來，我們通過使用 HTML 節點元素的 textContent 屬性設定文字來顯示計算出的分鐘數和秒數。
    element.textContent = `${paddedFormat(min)}:${paddedFormat(sec)}`;
  • 接下來，減少 secondsRemaining 的值，計時器功能通過 setInterval() 方法每秒執行一次。
  • 最後，一旦 secondsRemaining 值為 0，則觸發 clearInterval(countInterval) 以停止計時器。它還可以確保計時器不會重新啟動或進入負值狀態。

相關文章 - JavaScript Timer