Bagaimana untuk Mencipta Pemasa Undur 5 Minit Mudah dalam JavaScript?-tutorial js-php.cn

Bagaimana untuk Mencipta Pemasa Undur 5 Minit Mudah dalam JavaScript?

Barbara Streisand

Lepaskan： 2024-12-05 12:04:10

asal

420 orang telah melayarinya

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

Mencipta Pemasa Kira detik Asas dalam JavaScript

Masalah:

Mencari penyelesaian JavaScript yang mudah untuk melaksanakan pemasa kira detik yang memaparkan "Pendaftaran ditutup dalam 05:00 minit!" dan mengira detik hingga "00:00" sebelum menetapkan semula kepada "05:00."

Penyelesaian:

Untuk mengelakkan fungsi tarikh, kami mengemukakan dua pendekatan:

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

Salin selepas log masuk

HTML:

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

Salin selepas log masuk

Atas ialah kandungan terperinci Bagaimana untuk Mencipta Pemasa Undur 5 Minit Mudah dalam JavaScript?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!