Compte à rebours en javaScript
Posté : ven. 16 nov. 2012 20:23
Bonjour,
Ce post est une réponse à un message qui a été supprimé par erreur.
Objectif
réaliser une action à un intervalle régulier sur clic d'un bouton ou lien
méthode => setInterval(nom de la fonction à exécuter, délai entre chaque exécution)
le délai est en milliseconde (1000 = 1 seconde)
on peut affecter une variable à la fonction setInterval()
elle est utilisable avec la fonction clearInterval() qui arrête le timer.
Exemple :
lance un compte à rebours de 59 secondes à 0 secondes
toutes les secondes, le chronomètre est rafraichi
les chiffres sont des images, il y a des sets complets sur tous les sites qui proposent de télécharger des icônes.
Attention à ne pas trop utiliser setInterval (surtout dans une boucle), cause performance médiocre.
Ce post est une réponse à un message qui a été supprimé par erreur.
Objectif
réaliser une action à un intervalle régulier sur clic d'un bouton ou lien
méthode => setInterval(nom de la fonction à exécuter, délai entre chaque exécution)
le délai est en milliseconde (1000 = 1 seconde)
on peut affecter une variable à la fonction setInterval()
elle est utilisable avec la fonction clearInterval() qui arrête le timer.
Exemple :
lance un compte à rebours de 59 secondes à 0 secondes
toutes les secondes, le chronomètre est rafraichi
les chiffres sont des images, il y a des sets complets sur tous les sites qui proposent de télécharger des icônes.
Code : Tout sélectionner
<form id="Formulaire" action = "" method = "post">
<img hspace = "0" name = "dizaine" src = "images/5.gif" />
<img hspace = "0" name = "unite" src = "images/9.gif" /><br />
<input type = "button" value = "Debut" onClick = "if (!interval) {interval = setInterval(Ecoule, 1000)}" />
<input type = "button" value = "Pause" onClick = "clearInterval(interval); interval = null" />
</form>
<script type="text/javascript">
var reste = 59;
var interval = null;
var i;
// Chargement des images reprŽsentant les chiffre
var Chiffres = new Array(10);
for (i = 0; i < 10; i++)
{
Chiffres[i] = new Image();
Chiffres[i].src = 'images/' + i + '.gif';
}
// Definition de la fonction appelé chaque seconde
function Ecoule()
{
// On modifie l'affichage
window.document.dizaine.src = Chiffres[Math.floor(reste / 10)].src;
window.document.unite.src = Chiffres[reste % 10].src;
if (reste == 0)
{
// Une fois les 59 secondes écoulées, on le recharge.
clearInterval(interval);
alert('Trop tard !!!');
interval = null;
reste = 59;
}
reste--;
}
</script>
