Les minuteurs de compte à rebours sont un excellent moyen d’ajouter de l’interactivité et un sentiment d’urgence à vos applications web. Ce guide propose une approche complète de la création de minuteurs de compte à rebours personnalisables en JavaScript, couvrant tout, de l’implémentation de base aux fonctionnalités avancées.
Table des matières
- Création d’un minuteur de compte à rebours basique
- Personnalisation de votre minuteur de compte à rebours
- Fonctionnalités avancées du minuteur de compte à rebours
Création d’un minuteur de compte à rebours basique
Commençons par un minuteur de compte à rebours simple qui compte à rebours à partir de 10 secondes. Cet exemple utilise uniquement HTML et JavaScript, ce qui le rend facile à comprendre et à implémenter.
<!DOCTYPE html>
<html>
<head>
<title>Minuteur de compte à rebours</title>
</head>
<body>
<p>Compte à rebours : <span id="countdown">10</span> secondes</p>
<script>
let timeLeft = 10;
const countdownElement = document.getElementById("countdown");
const timerInterval = setInterval(function() {
if (timeLeft <= 0) {
clearInterval(timerInterval);
countdownElement.textContent = "Temps écoulé !";
} else {
countdownElement.textContent = timeLeft;
timeLeft--;
}
}, 1000);
</script>
</body>
</html>
Ce code définit d’abord une variable timeLeft initiale. Ensuite, il utilise setInterval pour exécuter répétitivement une fonction chaque seconde. Cette fonction décrémente timeLeft et met à jour le compte à rebours affiché. Une fois que timeLeft atteint 0, l’intervalle est effacé et « Temps écoulé ! » est affiché.
Personnalisation de votre minuteur de compte à rebours
Améliorons notre minuteur avec une entrée définie par l’utilisateur et une sortie formatée.
let startTime = parseInt(prompt("Entrez le temps de compte à rebours en secondes :", 10);
let timeLeft = startTime;
const countdownElement = document.getElementById("countdown");
const timerInterval = setInterval(function() {
const minutes = Math.floor(timeLeft / 60);
const seconds = timeLeft % 60;
const formattedTime = `${minutes.toString().padStart(2, '0')}:${seconds.toString().padStart(2, '0')}`;
if (timeLeft <= 0) {
clearInterval(timerInterval);
countdownElement.textContent = "Temps écoulé !";
} else {
countdownElement.textContent = formattedTime;
timeLeft--;
}
}, 1000);
Cette version améliorée invite l’utilisateur à entrer l’heure de début, gère les minutes et les secondes, et formate la sortie pour une meilleure lisibilité (MM:SS).
Fonctionnalités avancées du minuteur de compte à rebours
Pour rendre le minuteur encore plus polyvalent, considérez ces améliorations :
- Gestion des événements : Déclencher une fonction lorsque le minuteur atteint zéro. Cela pourrait être utilisé pour soumettre un formulaire, rediriger l’utilisateur ou effectuer toute autre action.
- Fonctionnalité pause/reprise : Ajouter des boutons pour mettre en pause et reprendre le compte à rebours.
- Style avec CSS : Améliorer l’attrait visuel de votre minuteur avec du CSS personnalisé.
En combinant ces techniques, vous pouvez créer des minuteurs de compte à rebours très fonctionnels et visuellement attrayants pour vos projets web.