JavaScript 中的倒數計時器

  1. JavaScript 中的到時計時器示例程式碼
  2. 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_minutestime_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) 以停止計時器。它還可以確保計時器不會重新啟動或進入負值狀態。