Compte à rebours

Salut,

j'ai fait une fonction le plus simplement du monde !
On mets la valeur du compteur à rebours en paramètre de la fonction comptearebours() dans le onload du body puis c'est tout.
Voici le code:

<html>
	<head>
		<script type="text/javascript">
			function comptearebours(time){
				if(time > 0){
					document.getElementById('cpt').innerHTML = time + ' seconde(s) restante(s)';
					setTimeout('comptearebours('+--time+')', 1000);
				}
				else
					document.getElementById('cpt').innerHTML = 'BOOOOM';
			}
		</script>
	</head>
	<body onload="comptearebours(10)">
		<div id="cpt"></div>
	</body>
</html>

Alors, on appelle la fonciton comptearebours en lui passant 10 seconde :

<body onload="comptearebours(10)">

Comme 10 est supérieur a 0

if(time > 0){

On ecrit dans le div ayant l'id 'cpt' le temps restant:

document.getElementById('cpt').innerHTML = time + ' seconde(s) restante(s)';

Ensuite, on rappel la même fonction grace à la fonction setTimeOut(fonction, temps) au bout d'une seconde (1000 millisecondes) en lui passant le compteur - 1

setTimeout('comptearebours('+--time+')', 1000);

Et dans le cas ou le compteur atteint 0, on ne satisfait plus la première condition, donc on passe dans la boucle else.
Donc, on ecrit juste dans le div ayant l'id 'cpt' que le compte à rebours est terminé : 'BOOOMMM':

else
		document.getElementById('cpt').innerHTML = 'BOOOOM';

Voila, c'est la manière la plus simple de creer un compte à rebours.
Si tu comprend pas avec ça ... je peux plus rien pour toi ! lol

En espérant t'avoir aidé :-)

A+

Gaerebut

Re,

tu n'a pas compris <div id="cpt"></div> ????

en fait, c'est un conteneur (<div></div>) ayant un id et qui va contenir la valeur du compteur !
Et oui, c'est du HTML.
Tout ce fichier est HTML (d'ou son extension .html)

A+

Gaerebut

Re,

alors là, ça rentre déjà plus dans l'algorithmie ! ^_^'

Bon je ne te cache pas que ça serait plus dur à comprendre.
Ici j'ai donc améliorer mon algorithme pour gérer le jours, les heures, les minutes et les secondes.
De plus, j'ai également gérer si il y a plusieurs Jours, ça mettra un 's' à jour, sinon non ! Pareil pour les minutes, secondes, heure! LOL

Bon, c'est de l'algo pur et simple.
Voici le code, dis moi si tu ne comprends pas, je t'expliquerai !

<html>
	<head>
		<script type="text/javascript">
			function comptearebours(tempTotal){
				if(tempTotal > 0){
					var tempDecompose = tempTotal;
					
					if(tempDecompose >= 3600*24){
						var jour = Math.floor(tempDecompose / (24*3600));
						tempDecompose -= jour * 3600 * 24;
					}
					else
						var jour = 0;
					
					if(tempDecompose >= 3600){
						var heure = Math.floor(tempDecompose / 3600);
						tempDecompose -= heure * 3600;
					}
					else
						var heure = 0;
						
					if(tempDecompose >= 60){
						var minute = Math.floor(tempDecompose / 60)
						tempDecompose -= minute * 60
					}
					else
						var minute = 0;
						
					var seconde = tempDecompose;
					var texte = 'Il reste ';
					
					if(jour > 0){
						if(jour == 1) var jourTexte = ' jour, ';
						else var	jourTexte = ' jours, ';
						texte += jour + jourTexte;
					}
						
					if(heure > 0)
						if(heure == 1) var  heureTexte = ' heure ';
						else var	heureTexte = ' heures ';
						texte += heure + heureTexte;
						
					if(minute > 0)
						if(minute == 1) var  minuteTexte = ' minute et ';
						else var	minuteTexte = ' minutes et ';
						texte += minute + minuteTexte;
						
					if(seconde == 1) var secondeTexte = ' seconde ';
					else var secondeTexte = ' secondes ';
					texte += seconde + secondeTexte + ' avant la Saint Valentin !';
					setTimeout('comptearebours('+--tempTotal+')', 1000);
				}
				else
					var texte = 'Joyeuse Saint Valentin !!!!';
					
				document.getElementById('cpt').innerHTML = texte;
			}
		</script>
	</head>
	<body onload="comptearebours(3092827)">
		<div id="cpt"></div>
	</body>
</html>

A+
Gaerebut

Re,

je comprend pas ce que tu veux faire à la fin !

A+
Gaerebut

En fait, tu voudrais une liste de promotion qui par exemple:

- Lot n°1 => 1 minute restant

Quand le lot 1 est terminé:

- Lot N°2 => 45 secondes restantes

Quand le lot 2 est terminé:

- Lot n°3 => 2heures, 34 minutes et 59 secondes restantes

Etc ...

Est-ce bien ça ???

Bonsoir,

j'ai repris mon code (une fois de plus) et l'a adapté à ta nouvelle demande:

ça donne ça:

<html>
	<head>
		<script type="text/javascript">
			var temps = 10;
			var tempTotal = temps;
			function comptearebours(){
				if(tempTotal > 0){
					var tempDecompose = tempTotal;
					
					if(tempDecompose >= 3600*24){
						var jour = Math.floor(tempDecompose / (24*3600));
						tempDecompose -= jour * 3600 * 24;
					}
					else
						var jour = 0;
					
					if(tempDecompose >= 3600){
						var heure = Math.floor(tempDecompose / 3600);
						tempDecompose -= heure * 3600;
					}
					else
						var heure = 0;
						
					if(tempDecompose >= 60){
						var minute = Math.floor(tempDecompose / 60)
						tempDecompose -= minute * 60;
					}
					else
						var minute = 0;
						
					var seconde = tempDecompose;
					var texte = 'Il reste ';
					
					if(jour > 0){
						if(jour == 1) var jourTexte = ' jour, ';
						else var jourTexte = ' jours, ';
						texte += jour + jourTexte;
					}
						
					if(heure > 0){
						if(heure == 1) var  heureTexte = ' heure ';
						else var heureTexte = ' heures ';
						texte += heure + heureTexte;
					}
						
					if(minute > 0){
						if(minute == 1) var  minuteTexte = ' minute et ';
						else var minuteTexte = ' minutes et ';
						texte += minute + minuteTexte;
					}
						
					if(seconde == 1) var secondeTexte = ' seconde ';
					else var secondeTexte = ' secondes '; 
					texte += seconde + secondeTexte + ' avant la fermeture de la vente !';
					tempTotal -= 1;
					setTimeout('comptearebours()', 1000);
				}
				else{
					document.getElementById('info').innerHTML += 'Vente FLASH termin\351e !<br />';
					tempTotal = temps;
					setTimeout('comptearebours()', 1);
				}
					
				document.getElementById('cpt').innerHTML = texte;
			}
		</script>
	</head>
	<body onload="comptearebours()">
		<div id="info">VENTE FLASH:<br /></div>
		<br />
		<div id="cpt"></div>
	</body>
</html>

Ici, le principe est un peu différent pour l'appel.
On ne lui passe pas de paramètre et le nombre de seconde est dans la variable temp au début du JS.

Voilaa

A+
Gaerebut

Nan c'est pas possible :-s

...

Bien sûr que si ! lol

<html>
	<head>
		<script type="text/javascript">
			var temps = 10;
			var tempTotal = temps;
			function comptearebours(){
				if(tempTotal > 0){
					var tempDecompose = tempTotal;
					
					if(tempDecompose >= 3600*24){
						var jour = Math.floor(tempDecompose / (24*3600));
						tempDecompose -= jour * 3600 * 24;
					}
					else
						var jour = 0;
					
					if(tempDecompose >= 3600){
						var heure = Math.floor(tempDecompose / 3600);
						tempDecompose -= heure * 3600;
					}
					else
						var heure = 0;
						
					if(tempDecompose >= 60){
						var minute = Math.floor(tempDecompose / 60)
						tempDecompose -= minute * 60;
					}
					else
						var minute = 0;
						
					var seconde = tempDecompose;
					var texte = 'Il reste ';
					
					if(jour > 0){
						if(jour == 1) var jourTexte = ' jour, ';
						else var jourTexte = ' jours, ';
						texte += jour + jourTexte;
					}
						
					if(heure > 0){
						if(heure == 1) var  heureTexte = ' heure ';
						else var heureTexte = ' heures ';
						texte += heure + heureTexte;
					}
						
					if(minute > 0){
						if(minute == 1) var  minuteTexte = ' minute et ';
						else var minuteTexte = ' minutes et ';
						texte += minute + minuteTexte;
					}
						
					if(seconde == 1) var secondeTexte = ' seconde ';
					else var secondeTexte = ' secondes '; 
					texte += seconde + secondeTexte + ' avant la fermeture de la vente !';
					tempTotal -= 1;
					setTimeout('comptearebours()', 1000);
				}
				else{
					tempTotal = temps;
					setTimeout('comptearebours()', 1);
				}
					
				document.getElementById('cpt').innerHTML = texte;
			}
		</script>
	</head>
	<body onload="comptearebours()">
		<div id="info">VENTE FLASH:</div>
		<br /><br />
		<div id="cpt"></div>
	</body>
</html>

A+

gaerebut

Combien te remercier ??!!
C'est excellent et très simple.
Par contre je n'ai pas compris la partie après " <body onload="comptearebours(10)">"

C'est dans le HTML ? mais il n'y a aucune balise ?
Et ça s'affiche dans la page ?

AH nan ch'uis trop bête j'avais pas fais attention à tes supers commentaires >_< !!
Encore une fois vraiment bien.
Mais dis moi on doit rajouter des fonctions pour afficher des jours ?
C'est à dire que je veux mettre à côté des mes articles : Plus que : 2J ou alors " Plus Que 23H45minet30sec avant la saint Valentin !!

oK NIQUEEEL !!!
Alors je n'y connais rien au JavaScript, mais j'ai changé 2 ou 3 trucs pour afficher ce que je voulais, je pense que c'est bon :

<html>
	<head>
		<script type="text/javascript">
			function comptearebours(tempTotal){
				if(tempTotal > 0){
					var tempDecompose = tempTotal;
					
					if(tempDecompose >= 3600*24){
						var jour = Math.floor(tempDecompose / (24*3600));
						tempDecompose -= jour * 3600 * 24;
					}
					else
						var jour = 0;
					
					if(tempDecompose >= 3600){
						var heure = Math.floor(tempDecompose / 3600);
						tempDecompose -= heure * 3600;
					}
					else
						var heure = 0;
						
					if(tempDecompose >= 60){
						var minute = Math.floor(tempDecompose / 60)
						tempDecompose -= minute * 60
					}
					else
						var minute = 0;
						
					var seconde = tempDecompose;
					var texte = 'VENTE FLASH ';
					
					if(jour > 0){
						if(jour == 1) var jourTexte = ' jour, ';
						else var	jourTexte = ' jours, ';
						texte += jour + jourTexte;
					}
						
					if(heure > 0)
						if(heure == 1) var  heureTexte = ' heure ';
						else var	heureTexte = ' heures ';
						texte += heure + heureTexte;
						
					if(minute > 0)
						if(minute == 1) var  minuteTexte = ' minute et ';
						else var	minuteTexte = ' minutes et ';
						texte += minute + minuteTexte;
						
					if(seconde == 1) var secondeTexte = ' seconde ';
					else var secondeTexte = ' secondes '; 
					texte += seconde + secondeTexte + ' AVANT FERMETURE DE LA VENTE !';
					setTimeout('comptearebours('+--tempTotal+')', 1000);
				}
				else
					var texte = 'Joyeuse Saint Valentin !!!!';
					
				document.getElementById('cpt').innerHTML = texte;
			}
		</script>
	</head>
	<body onload="comptearebours(3092827)">
		<div id="cpt"></div>
	</body>
</html>

Et j'ai vu qu'à la fin tu as mis " Joyeuses Saint Valentin !!" mais est-ce que tu peux faire une boucle à la fin qui remet les promotions en route, c'est juste à moi de choisir les articles à mettre dans le dossier en promotion ?
Merci de ton aide =)

En fait une décompteur qui se remet à zero, c'est-à-dire qu'il recommence à la fin, pas d'affichage tu vois ?

Bah en fait pas vraiment.
Tu sais une boucle de compte à rebours de 3J par exemple comme tu me l'as donnée.
Mais juste est-ce qu'il serait possible de faire en sorte que ça redémarre tout seul ?
C'est-à-dire à la fin des 3J, ça recommence à 3 jours.
Tu vois ?

ALors celui-là est très bien.
Maintenant dis moi un truc.
Est-ce que je peux le mettre sur mon site en php sans qu'il affiche une nouvelle ligne à chaque fois ?
Tu vois c'est exactement ça mais pas de nouvelles lignes c'est possible ?

J'en demande beaucoup excuse moi =O

Parfait !
Il est nickel !
En plus j'ai compris comment changé la valeur du compte à rebours, c'est pas mal intéressant le Java Script =) !
Juste un truc: j'ai enlevé les <br /> pour ne pas avoir de lignes entre les 2 mais comment faire pour afficher le compte à rebours EN FACE de " Vente Flash " ?

Merci beaucoup !

PARFAIT !!!

Je ne sais pas quoi dire.
Merci beaucoup, il est exactement comme je le voulais :D :D !
Qu'est-ce que je pourrais t'offrir pour te remercier ??

(^_^)'

Rien ne t'inquiète pas !
ça m'a aussi permis de faire de l'algo :p

Bon courage pour la suite ;-)
Et n'hésite pas si tu as d'autre problème :)

A+
Gaerebut