Comment créer un compte à rebours simple en utilisant uniquement du JavaScript Vanilla ?

Création d'un compte à rebours simple avec Vanilla JavaScript

Dans le développement Web, il est souvent nécessaire d'implémenter des comptes à rebours. Bien que diverses solutions existent, les débutants peuvent les trouver excessivement complexes. Cet article montre comment créer un compte à rebours simple et non jQuery en JavaScript à l'aide d'une implémentation Vanilla.

L'objectif : créer un compte à rebours qui :

• Compte à rebours de « 05h00 » à « 00h00 ».
• Se réinitialise à « 05h00 » après avoir atteint "00:00".
• Évite les fonctions complexes comme les objets Date.

Implémentation :

Pour créer notre timer, nous utilisons le étapes suivantes :

1. Définissez la fonction startTimer :Ceci La fonction prend deux paramètres : la durée (en secondes) et l'élément d'affichage à mettre à jour.
2. Initialisez la minuterie et les variables : Nous réglons la minuterie sur la durée fournie et calculons les minutes initiales et secondes.
3. Utilisez setInterval pour mettre à jour l'affichage : Chaque seconde, nous recalculons les minutes et les secondes, les formatons avec des zéros non significatifs si nécessaire, et mettons à jour l'élément d'affichage.
4. Réinitialiser la minuterie en atteignant 0 : Après chaque décrémentation, nous vérifions si la minuterie a atteint 0 et la réinitialisons si nécessaire.

Le Code :

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

Le HTML :

<div>Registration closes in <span>

Ce code crée un compte à rebours qui met à jour l'élément d'affichage avec le temps restant chaque seconde. Lorsque la minuterie atteint 00h00, elle se réinitialise à 05h00.

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!