Compte à rebours en javaScript Le sujet est résolu

Répondre
zexcelator
    unknown unknown

Compte à rebours en javaScript

Message par zexcelator »

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.

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>
Attention à ne pas trop utiliser setInterval (surtout dans une boucle), cause performance médiocre.
titou
Membre VIP
Membre VIP
Messages : 2033
Enregistré le : mer. 28 sept. 2011 15:22
Localisation : france ardeche
A été remercié : 1 fois
    unknown unknown

Re: Compte à rebours en javaScript

Message par titou »

merci zexcelator ;)
Le fossé séparant théorie et pratique est moins large en théorie qu’il ne l’est en pratique Toute demande de liens par MP est inutile !
Avatar du membre
Nash
Administrateur du site
Administrateur du site
Messages : 4403
Enregistré le : sam. 6 nov. 2010 14:19
Localisation : 89
A été remercié : 21 fois
    unknown unknown

Re: Compte à rebours en javaScript

Message par Nash »

Ce post est une réponse à un message qui a été supprimé par erreur.
qui c'est qui a failloté :D

oui encore desolé pour l"erreur ;)
Image
• Ryzen 9 5900x
• B550 AORUS PRO 
• RTX 3060ti phoenix 
• thermaltake core p8 tg
• 1 x SSD 500GB   PCIe4 M.2 SEA
• 32 G DDR4 3600 corsaire
• Corsaire 1000w full modulaire passive
• MasterLiquid ML240R RGB
•1 to stockage NVME.M2 PCIe
titou
Membre VIP
Membre VIP
Messages : 2033
Enregistré le : mer. 28 sept. 2011 15:22
Localisation : france ardeche
A été remercié : 1 fois
    unknown unknown

Re: Compte à rebours en javaScript

Message par titou »

:lol: :lol:

j'ai mp pour pouvoir avoir la solution ;)

:rofl: :rofl:
Le fossé séparant théorie et pratique est moins large en théorie qu’il ne l’est en pratique Toute demande de liens par MP est inutile !
Répondre