suchen

Heim >Web-Frontend >js-Tutorial >Wie erstelle ich einen einfachen 5-Minuten-Countdown-Timer in JavaScript?

Wie erstelle ich einen einfachen 5-Minuten-Countdown-Timer in JavaScript?

Barbara Streisand
Barbara StreisandOriginal
2024-12-05 12:04:10405Durchsuche

How to Create a Simple 5-Minute Countdown Timer in JavaScript?

Erstellen eines einfachen Countdown-Timers in JavaScript

Problem:

Suche nach einer einfachen JavaScript-Lösung um einen Countdown-Timer zu implementieren, der „Registrierung endet in 05:00 Minuten!“ anzeigt. und zählt bis „00:00“ herunter, bevor es auf „05:00“ zurückgesetzt wird.

Lösung:

Um Datumsfunktionen zu vermeiden, stellen wir zwei Ansätze vor:

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

HTML:

<body>
    <div>Registration closes in <span>

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

JavaScript date
Stellungnahme：
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
Vorheriger Artikel：Wie kann JSON.stringify JavaScript-Objekte in lesbare Strings umwandeln?Nächster Artikel：Wie kann JSON.stringify JavaScript-Objekte in lesbare Strings umwandeln?

In Verbindung stehende Artikel

Mehr sehen