Création d'un compte à rebours JavaScript simple
La mise en œuvre d'un compte à rebours en JavaScript peut être simple, même sans utiliser d'objets Date complexes. Voici un guide simplifié pour créer un compte à rebours simple :
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); };
Ce code établit une variable de minuterie définie sur la durée souhaitée en secondes (dans ce cas, 5 minutes) et met à jour un élément d'affichage avec le temps restant. Il s'actualise toutes les secondes, décrémentant la minuterie à chaque fois et affichant les minutes et les secondes formatées. Une fois le temps écoulé, le timer se réinitialise à la durée initiale.
Option jQuery (avec bouton Start/Stop)
Pour une version avec bouton start/stop :
$(function () { var timer = 60 * 5, display = $("#time"), interval; $("#start").click(function () { interval = setInterval(function () { var minutes = Math.floor(timer / 60), seconds = timer % 60; minutes = minutes < 10 ? "0" + minutes : minutes; seconds = seconds < 10 ? "0" + seconds : seconds; display.text(minutes + ":" + seconds); timer--; if (timer < 0) { clearInterval(interval); timer = 60 * 5; } }, 1000); }); $("#stop").click(function () { clearInterval(interval); }); });
Cette version comprend un bouton de démarrage qui lance le minuteur et un bouton d'arrêt qui le met en pause. Il utilise jQuery pour plus de commodité, simplifiant la manipulation des éléments DOM.
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!