如何僅使用 Vanilla JavaScript 建立簡單的倒數計時器？

使用 Vanilla JavaScript 建立簡單的倒數計時器

在 Web 開發中，通常需要實作倒數計時器。雖然有各種解決方案，但初學者可能會發現它們過於複雜。本文示範如何使用普通實作在 JavaScript 中建立簡單的非 jQuery 倒數計時器。

目標：建立倒數計時器：

• 從「05:00」倒數到「00:00」。
• 重設為到達「00:00」後的「05:00」。
• 避免像 Date 物件這樣的複雜函數。

實作：

到建立我們的計時器，我們使用以下內容步驟：

1. 定義startstarter函數： 此函數有兩個參數：持續時間（以秒為單位）和要更新的顯示元素。
2. 初始化計時器和變數： 我們將計時器設定為提供的持續時間併計算初始分鐘數和
3. 使用setInterval 更新顯示： 每一秒，我們都會重新計算分鐘和秒，如果需要的話用前導零格式化它們，並更新顯示元素。
4. 在達到 0 時重置計時器：每次遞減後，我們檢查計時器是否已達到0，如果達到則重置它

代碼：

function startTimer(duration, display) {
    var timer = duration, minutes, seconds;
    setInterval(function () {
        minutes = parseInt(timer / 60, 10);
        seconds = parseInt(timer % 60, 10);

        minutes = minutes < 10 ? "0" + minutes : minutes;
        seconds = seconds < 10 ? "0" + seconds : seconds;

        display.textContent = minutes + ":" + seconds;

        if (--timer < 0) {
            timer = duration;
        }
    }, 1000);
}

window.onload = function () {
    var fiveMinutes = 60 * 5,
        display = document.querySelector('#time');
    startTimer(fiveMinutes, display);
};

HTML：

<div>Registration closes in <span>

此程式碼建立倒數計時器，每秒更新顯示元素的剩餘時間。當計時器到達 00:00 時，它會重設為 05:00。

以上是如何僅使用 Vanilla JavaScript 建立簡單的倒數計時器？的詳細內容。更多資訊請關注PHP中文網其他相關文章！