Comment puis-je créer un simple compte à rebours JavaScript ?

Création d'un compte à rebours JavaScript simple

Votre requête concernant la création d'un compte à rebours minimaliste est courante dans le développement Web. Décomposons les étapes à suivre pour y parvenir.

Approche JavaScript Vanilla :

Pour votre besoin spécifique d'afficher une minuterie qui compte à rebours de "05:00" à "00:00" et les réinitialisations, vous pouvez utiliser l'approche suivante en utilisant 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);
};

Dans ce script :

• duration spécifie le temps du compte à rebours initial en secondes (ici, 5 minutes).
• display est un élément HTML qui affichera le compte à rebours.
• setInterval exécute la logique du minuteur toutes les secondes (1 000 millisecondes).
• À l'intérieur du minuteur, parseInt est utilisé pour convertir le temps restant en minutes et secondes.
• Les chaînes affichées sont complétées par des zéros pour conserver le format "05:00".
• Lorsque la minuterie atteint 0, elle revient à la durée.

Fonctionnalités supplémentaires :

Si vous le souhaitez, vous pouvez étendre la fonctionnalité avec des fonctionnalités telles que comme bouton marche/arrêt :

<button>

document.getElementById("start").addEventListener("click", function () {
    // Start the timer...
});

document.getElementById("stop").addEventListener("click", function () {
    // Stop the timer...
});

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!