Wie erstellt man einen einfachen Countdown-Timer nur mit Vanilla-JavaScript?

Einen einfachen Countdown-Timer mit Vanilla JavaScript erstellen

In der Webentwicklung ist es oft notwendig, Countdown-Timer zu implementieren. Obwohl es verschiedene Lösungen gibt, können Anfänger diese als übermäßig komplex empfinden. In diesem Artikel wird gezeigt, wie Sie mithilfe einer Vanilla-Implementierung einen einfachen Countdown-Timer ohne jQuery in JavaScript erstellen.

Das Ziel: Erstellen Sie einen Countdown-Timer, der:

• Zählt von „05:00“ bis „00:00“ herunter.
• Setzt sich nach Erreichen auf „05:00“ zurück „00:00“.
• Vermeidet komplexe Funktionen wie Datumsobjekte.

Implementierung:

Um unseren Timer zu erstellen, verwenden wir die Folgende Schritte:

1. Definieren Sie die startTimer-Funktion:Diese Funktion benötigt zwei Parameter: die Dauer (in Sekunden) und das zu aktualisierende Anzeigeelement.
2. Initialisieren Sie den Timer und die Variablen: Wir stellen den Timer auf die angegebene Dauer ein und berechnen die anfänglichen Minuten und Sekunden .
3. Verwenden Sie setInterval, um die Anzeige zu aktualisieren: Jede Sekunde berechnen wir die Minuten und Sekunden neu und formatieren sie mit führenden Nullen ggf. und aktualisieren Sie das Anzeigeelement.
4. Setzen Sie den Timer bei Erreichen von 0 zurück: Nach jedem Dekrement prüfen wir, ob der Timer 0 erreicht hat und setzen ihn gegebenenfalls zurück.

Der Kodex:

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

Der HTML:

<div>Registration closes in <span>

Dieser Code erstellt einen Countdown-Timer, der das Anzeigeelement jede Sekunde mit der verbleibenden Zeit aktualisiert. Wenn der Timer 00:00 erreicht, wird er auf 05:00 zurückgesetzt.

Das obige ist der detaillierte Inhalt vonWie erstellt man einen einfachen Countdown-Timer nur mit Vanilla-JavaScript?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!