Wie erstelle ich einen einfachen JavaScript-Countdown-Timer mit und ohne jQuery?

Einen einfachen JavaScript-Countdown-Timer erstellen

Die Implementierung eines Countdown-Timers in JavaScript kann unkompliziert sein, auch ohne die Verwendung komplexer Datumsobjekte. Hier ist eine vereinfachte Anleitung zum Erstellen eines einfachen Countdown-Timers:

Vanilla JavaScript

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

Dieser Code erstellt eine Timer-Variable, die auf die gewünschte Dauer in Sekunden eingestellt ist (in diesem Beispiel). (In diesem Fall 5 Minuten) und aktualisiert ein Anzeigeelement mit der verbleibenden Zeit. Es wird jede Sekunde aktualisiert, wobei der Timer jedes Mal dekrementiert wird und die formatierten Minuten und Sekunden angezeigt werden. Sobald die Zeit abgelaufen ist, wird der Timer auf die ursprüngliche Dauer zurückgesetzt.

jQuery-Option (mit Start/Stopp-Taste)

Für eine Version mit einer Start/Stopp-Taste:

$(function () {
    var timer = 60 * 5,
        display = $("#time"),
        interval;
    $("#start").click(function () {
        interval = setInterval(function () {
            var minutes = Math.floor(timer / 60),
                seconds = timer % 60;
            minutes = minutes < 10 ? "0" + minutes : minutes;
            seconds = seconds < 10 ? "0" + seconds : seconds;
            display.text(minutes + ":" + seconds);
            timer--;
            if (timer < 0) {
                clearInterval(interval);
                timer = 60 * 5;
            }
        }, 1000);
    });
    $("#stop").click(function () {
        clearInterval(interval);
    });
});

Diese Version enthält eine Starttaste, die den Timer startet, und eine Stopptaste, die ihn anhält. Der Einfachheit halber wird jQuery verwendet, um die Bearbeitung von DOM-Elementen zu vereinfachen.

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