Heim > Web-Frontend > js-Tutorial > Wie erstelle ich einen einfachen JavaScript-Countdown-Timer mit und ohne jQuery?

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

Mary-Kate Olsen
Freigeben: 2024-12-04 18:34:15
Original
275 Leute haben es durchsucht

How to Create a Simple JavaScript Countdown Timer with and without 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);
};
Nach dem Login kopieren

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);
    });
});
Nach dem Login kopieren

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!

Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Neueste Artikel des Autors
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage