Comment créer un simple compte à rebours de 5 minutes en JavaScript ?-js tutoriel-php.cn

Comment créer un simple compte à rebours de 5 minutes en JavaScript ?

Barbara Streisand

Libérer： 2024-12-05 12:04:10

original

351 Les gens l'ont consulté

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

Création d'un compte à rebours de base en JavaScript

Problème :

Recherche d'une solution JavaScript simple pour implémenter un compte à rebours qui affiche « L'inscription se termine dans 05h00 ! » et compte à rebours jusqu'à "00:00" avant de réinitialiser à "05:00".

Solution :

Pour éviter les fonctions de date, nous présentons deux approches :

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

Copier après la connexion

HTML :

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

Copier après la connexion

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!