Double compte à rebours

Version imprimable

Bonjour à tous,

Je débute en Javascript et j'ai souhaité créer un compte à rebours pour une vente privée. Voici le principe de mon compte à rebours:

On définit la date d'ouverture de la vente. Lorsque le compteur arrive à la fin, un autre compteur se lance, celui du temps qu'il reste pour profiter de la vente. Jusque là, ça marche, le souci, c'est que lorsque le second compteur se termine, j'aimerais qu'il reste à 0, et que le message de statut "Vente terminée" apparaisse à côté.

Sauf que dans le cas actuel, le compteur passe dans le négatif. Je débute, et je ne trouve pas le souci !

Merci pour votre aide, voici mon code:

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
 
			<script>
				var cible = new Date('June 18, 2011 07:00:00');
				var time = parseInt(cible.getTime() / 1000, 10);
				var text = "Ouverture de la vente dans: ";
 
				var img_vp = '<img src="ressources/vp/vp_majirel.jpg"/><br/>';
 
				//Temps avant ouverture de la vente
				function decompte()
				{
					var aujourdhui = new Date();
					time_tmp = parseInt(aujourdhui.getTime() / 1000, 10);
					restant = time - time_tmp;
 
					jour = parseInt((restant / (60 * 60 * 24)), 10);
					heure = parseInt((restant / (60 * 60) - jour * 24), 10);
					minute = parseInt((restant / 60 - jour * 24 * 60 - heure * 60), 10);
					seconde = parseInt((restant - jour * 24 * 60 * 60 - heure * 60 * 60 - minute * 60), 10);
 
					document.getElementById('jours').innerHTML = jour;
					document.getElementById('heures').innerHTML  = heure;
					document.getElementById('minutes').innerHTML  = minute;
					document.getElementById('secondes').innerHTML = seconde;
					document.getElementById('text').innerHTML = text;
					document.getElementById('img_vp').innerHTML = img_vp;		
 
					if (time_tmp < time)
						setTimeout('decompte()', 1000);
					else
					{
						// Temps restant avant fermeture de la vente
 
						//Activation du bandeau de la vente privée
						img_vp = '<a href="#"><img src="ressources/vp/vp_majirel.jpg"/></a><br/>';
						document.getElementById('img_vp').innerHTML = img_vp;	
						text = "Il vous reste: "
						document.getElementById('text').innerHTML = text;
 
						cible = new Date('June 20, 2011 00:00:00');
						time = parseInt(cible.getTime() / 1000, 10);
 
						function decompte()
						{
							aujourdhui = new Date();
							time_tmp = parseInt(aujourdhui.getTime() / 1000, 10);
							restant = time - time_tmp;
 
							jour = parseInt((restant / (60 * 60 * 24)), 10);
							heure = parseInt((restant / (60 * 60) - jour * 24), 10);
							minute = parseInt((restant / 60 - jour * 24 * 60 - heure * 60), 10);
							seconde = parseInt((restant - jour * 24 * 60 * 60 - heure * 60 * 60 - minute * 60), 10);
 
							//ne prend pas à compte 
							if (time_tmp < time)
								setTimeout('decompte()', 1000);
							else
							{
 
								// Temps fini, on fait ce qu'on veut
								document.getElementById('jours').innerHTML = 0;
								document.getElementById('heures').innerHTML  = 0;
								document.getElementById('minutes').innerHTML  = 0;
								document.getElementById('secondes').innerHTML = 0;
 
								var statut = '- Vente privée terminée';
 
								document.getElementById('statut').innerHTML = statut;
							}
						}
						setTimeout('decompte()', 500);
 
					}
				}
				setTimeout('decompte()', 500);
 
				</script>
				<span id="img_vp"></span>
				<span style="color:#e11076;font-weight:bold;font-family:Calibri, Arial, sans-serif;">
				<span id="text"></span>
				<span id="jours"></span> jour(s)
				<span id="heures"></span> h
				<span id="minutes"></span> min
				<span id="secondes"></span> s
 
				<span id="statut"></span>
				</span>

20/06/2011, 11h07
vermine
Bonjour,

Il faut nettoyer le timer. Lancez-le de cette manière :
Code:

1 2 3 //variable globale var mon_timer;
et lors des appels :
Code:

1 2 mon_timer = setTimeout('decompte()', 500);
Et lorsqu'il est à zéro, nettoyez-le ainsi :

Code:

clearTimer(mon_timer);
20/06/2011, 11h28
newbee13

Bonjour,

Merci beaucoup pour cette réponse rapide =)

J'ai essayé d'insérer ce que vous m'avez dit, mais comme je débute, j'ai dû mal le faire, et du coup, cela ne fonctionne pas. Je ne comprends pas les lignes où je dois corriger.

Par ailleurs, je ne sais pas si c'est lié, mais il semblerait que les lignes situées entre la ligne 54 et 69 ne soient pas prises en compte 8O
20/06/2011, 13h18
vermine

Vous êtes sûr de vos calculs ? Mettez une alert dans le else pour vérifier qu'il passe bien dedans.

Affichez également la valeur de "resta... :lefou:

Oubliez ce que j'ai dit. Vous avez défini une fonction decompte dans la fonction decompte. Ce n'est pas une syntaxe Javascript. :P

Il faudrait peut-être que vous relisiez quelques tutoriels pour modifier votre code correctement. ;)

Courage.

Citation:

Envoyé par newbee13

Code:

1
2
3
4
5
6
7
							}
						}
						setTimeout('decompte()', 500);
 
					}
				}
				setTimeout('decompte()', 500);

Oula... *hic* santé les gars ! :chin:

Citation:

Envoyé par RomainVALERI

Oula... *hic* santé les gars ! :chin:

:mrgreen: Je vois pas le rapport…

D'ailleurs :
Code:

1 2 3 4 5 6 7 8 9 function bidule() { console.info('x'); function bidule() { console.info('y'); } bidule(); } bidule();
Ça marche, et ça ne boucle pas ! Il y a deux fonctions bidule différentes car pas dans la même portée.

Sinon j'ai quelques remarques qui vont peut-être faire avancer les choses, ou pas.
– J'utiliserais plutôt Math.floor au lieu de parseInt, c'est plus lisible

– Je remplacerais les

Code:

setTimeout('decompte()', 500)

par des

Code:

setTimeout(decompte, 500)

c'est la syntaxe standard, et puis on économise une analyse de chaîne.

– Quand on a

Code:

restant = time - timestamp

si time < timestamp, alors restant < 0 et réciproquement. C'est bien de l'avoir en tête, et en l'occurence on voit tout de suite quand il faut s'arrêter :
Code:

1 2 3 4 5 6 7 8 9 function decompte() { aujourdhui = new Date(); time_tmp = parseInt(aujourdhui.getTime() / 1000, 10); restant = time - time_tmp; if (restant > 0) { jour = parseInt((restant / (60 * 60 * 24)), 10); heure = ...
– Déclare tes variables avec var si tu ne veux pas qu'elles soient globales.

– Enfin, mais ça ne tient qu'à moi, plutôt que multiplier les <span>, je construirais une chaîne entièrement dans le script et l'ajouterais seulement à la fin quand elle est complète.

;)