Wie kann ich einen einfachen JavaScript-Countdown-Timer erstellen?

Erstellen eines einfachen JavaScript-Countdown-Timers

Ihre Frage zum Erstellen eines minimalistischen Countdown-Timers kommt in der Webentwicklung häufig vor. Lassen Sie uns die Schritte aufschlüsseln, die dazu erforderlich sind.

Vanilla-JavaScript-Ansatz:

Für Ihre spezifische Anforderung, einen Timer anzuzeigen, der von „05:00“ bis herunterzählt „00:00“ und Zurücksetzen können Sie mit Vanilla-JavaScript den folgenden Ansatz verwenden:

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);
};

Hier Skript:

• duration gibt die anfängliche Countdown-Zeit in Sekunden an (hier 5 Minuten).
• display ist ein HTML-Element, das den Countdown anzeigt.
• setInterval Führt die Timer-Logik jede Sekunde (1000 Millisekunden) aus.
• Im Timer wird parseInt verwendet, um den Rest umzuwandeln Zeit in Minuten und Sekunden.
• Die angezeigten Zeichenfolgen werden mit Nullen aufgefüllt, um das Format „05:00“ beizubehalten.
• Wenn der Timer 0 erreicht, wird er auf die Dauer zurückgesetzt.

Zusätzliche Funktionen:

Auf Wunsch können Sie die Funktionalität um Funktionen erweitern wie eine Start-/Stopp-Taste:

<button>

document.getElementById("start").addEventListener("click", function () {
    // Start the timer...
});

document.getElementById("stop").addEventListener("click", function () {
    // Stop the timer...
});

Das obige ist der detaillierte Inhalt vonWie kann ich einen einfachen JavaScript-Countdown-Timer erstellen?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!