Appel multiple compte à rebours

Version imprimable

Bonjour,

Je développe un site en php avec l'aide de templates et une base de données mysql.
J'ai repris une fonction en javascript qui décompte le temps restant jusqu'à une date entrée en paramètre.
En gros je souhaite avoir un décompte en temps réel sur chaque ligne d'un tableau.
Cette fonction fonctionne correctement lorsque je l'appelle une seule fois depuis mon template (tableau à une seule ligne)
mais ne fonctionne plus correctement lors d'appels multiples, au lieu d'avoir un décompte par ligne du tableau,
le décompte ne se fait que sur la première ligne et avec la dernière variable passée en paramètre!!!
Je ne sais pas si cette méthode est adaptée à ce que je veux faire.

Voici mon code:

Template:
Code:

1 2 3 4 5 6 7 8 9 10  <SCRIPT LANGUAGE="JavaScript"> decompte("{PROMO.DAT_FIN}",'cpt_' + {PROMO.ID_DIV}); </SCRIPT> <tr class="{PROMO.CLASS}" valign="center"> <td> <div id="cpt_{PROMO.ID_DIV}"></div> </td> <tr> 
Javascript:
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 var dat_deb=''; function decompte(inDate, inDivName) { var div_id=''; dat_deb = inDate; div_id = inDivName; .... document.getElementById("cpt_" + inDivName).innerHTML= MonDecompte; tempo = setTimeout("decompte(dat_deb, inDivName)", 100); }
Merci pour votre aide.

19/09/2011, 14h02
SpaceFrog

en l'instanciant avec une new()
19/09/2011, 14h26
titix70190

Merci SpaceFrog pour ta réponse,

Je viens de mettre dans mon template:

Code:

cpt = new decompte("{PROMO.DAT_FIN}",'cpt_' + {PROMO.ID_DIV});

A priori çà me paraît logique de créer une nouvelle instance pour chaque ligne
mais çà ne fonctionne toujours pas!

J'avoue avoir du mal à comprendre si l'erreur vient de mon template où de la fonction javascript en elle même.

Merci d'avance.
19/09/2011, 14h28
SpaceFrog

cela provient à mon avis aussi des id ... et du fait que tu attribues touts sur la même variable ...
fait un push dans un array

Code:

cpt=new Array()
19/09/2011, 14h36
Invité

salut,

ben déjà tu peux commencer par montrer le code html généré depuis tes templates plutot que tes templates...

Ensuite, non new ne sert à rien. Ca sert si genre ya des this qui trainent ce qui n'est pas le cas dans decompte.

Enfin, les ... c'est un moyen de dire ya des trucs triviaux dont on se contre balance, mais ici, les ... sont plus genants qu'autre chose : on ne connait même pas la fonction decompte. Ni sa fin de scope, pas plus que son appel.

edit : au temps pour moi, la derniere accolade delimite le scope de compte. Jme suis fait avoir par l'indentation :aie::aie::aie:.
Il reste tout de même le problème du markup html, ainsi que des appels à la fonction decompte, qu'on ne connait pas.
19/09/2011, 14h46
SpaceFrog

Citation:

Ensuite, non new ne sert à rien.

Ha donc tu peux lancer sur la même variable plusieurs instances d'une même fonction sans que les setInterval ne s'emmêlent les crayons???

je serais curieux de voir un exemple ...
19/09/2011, 15h53
Invité

Moi je suis également curieux de voir comment tu utiliserais ton new;), parce que bon, lancer des instances de fonctions sur une variable, ca ne m'évoque rien.
19/09/2011, 15h56
SpaceFrog
Dans l'idée ça ressemblerait à
Code:

1 2 3 tempo=new Array(); tempo.push( setTimeout(function(){ new decompte(dat_deb, inDivName)}, 100) )
;

Ce qui peut aussi bloquer est la tentative de passage de paramètre dasn le setInterval

Code:

1 2 3 4 5 6 function decompte(arg) { console.log(arg); setTimeout(function(){ decompte(arg); }, 1000); }
//la fonction similaire à ci-dessus, mais en plus simple.
Code:

1 2 3 4 5 for(var i =0;i<2;i++){ (function(id){ setTimeout(function(){ decompte("timer "+id)}, 1000) })(i); }
new ne sert bien à rien...du moins je ne saisis pas ton raisonnement qui en nécessite la présence

Merci pour vos réponses, mais je suis toujours bloqué depuis hier aprem :evilred:

Voici le code Html généré par le template:

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<table class="even">
	<SCRIPT LANGUAGE="JavaScript">
		cpt = new Array();
		cpt.push = decompte("20/09/2011 07:00:00",'cpt_' + '1');
	</SCRIPT>
	<tr class="even" valign="center"> <!-- class even -->
		<td>du 15/09/2011 07:00:00<br/>au 20/09/2011 07:00:00</td>
		<td>
			<div id="cpt_1"></div>
		</td>
	<tr>
	<SCRIPT LANGUAGE="JavaScript">
		cpt = new Array();
		cpt.push = decompte("21/09/2011 18:00:00",'cpt_' + '2');
	</SCRIPT>
	<tr class="" valign="center"> <!-- class even -->
		<td>du 17/09/2011 09:00:00<br/>au 21/09/2011 18:00:00</td>
		<td>
			<div id="cpt_2"></div>
		</td>
	<tr>
</table>

Cà me paraît correct, 2 appels à la fonction avec des paramètres différents, et les deux id des <div> sont différents.

Et le code javascript en entier:

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
 
var dat_deb='';
 
function decompte(inDate, inDivName) {
 
	var div_id='';
	dat_deb = inDate;
	div_id = inDivName;
 
	Maintenant = new Date;
	TempMaintenant = Maintenant.getTime();
 
	Year=inDate.substr( 6, 4);
	Month=inDate.substr( 3, 2);
	Day=inDate.substr( 0, 2);
	Hour=inDate.substr( 11, 2);
	Minute=inDate.substr( 14, 2);
	Seconde=inDate.substr( 17, 2);
 
	Future = new Date(Year, Month - 1, Day , Hour, Minute, Seconde);
	TempFuture = Future.getTime();
 
	DiffSec = Math.floor((TempFuture-TempMaintenant)/1000);
	DiffMin = Math.floor(DiffSec/60);
	DiffHeure = Math.floor(DiffMin/60);
	DiffJour = Math.floor(DiffHeure/24);
 
	while (DiffMin>=60){ DiffMin = DiffMin-60; }
	while (DiffHeure>=24){ DiffHeure = DiffHeure-24; }
	while (DiffSec>=60){ DiffSec = DiffSec-60; }
 
	if (DiffSec<10){ DiffSec = '0' + DiffSec; }
	if (DiffMin<10){ DiffMin = '0' + DiffMin; }
	if (DiffHeure<10){ DiffHeure = '0' + DiffHeure; }
 
	document.getElementById("cpt_" + div_id).innerHTML=' ' + DiffJour + 'j ' + DiffHeure + 'h ' + DiffMin + 'm ' + DiffSec + 's---';
	tempo = setTimeout("decompte(dat_deb, div_id)", 100);
}

J'ai l'impression que l'erreur se situe au niveau de l'instruction getElementById ou de la tempo d'actualisation mais je ne sais pas laquelle.

Merci d'avance.

19/09/2011, 16h29
Invité

re,

nos posts se sont croisés.
J'ai envie de dire tu prends le script que j'ai posé ci-dessus qui affiche bien les bons trucs, et tu copies colles...petit à petit ta logique avec tes substrings toussa, tout en vérifiant que ca continue bien de marcher!

Sinon
cpt = new Array();
risque d'écraser la var globale cpt à chaque fois...

Code:

cpt = cpt||[];

semble plus aproprié!

Bonsoir et merci à vous,

SpaceFrog,
J'ai suivi tes conseils en instanciant ma fonction et essayé un autre de tes posts sur developpez.net
http://www.developpez.net/forums/d10...ours-multiple/,
j'ai seulement la dernière ligne de mon tableau qui prend en compte le js.

galerien69,
La boucle for dans le js fonctionne bien, le compte à rebours pour chaque ligne de mon tableau se fait mais firefox plante (boucle infinie).

Les traces du js (instruction alert) en fonction du nombre d’occurrence:
1-1-1-1
2-2-2-2
2-3-3-3
--2-4-4
--3-2-5
----4-2
------5

Le code html de mon template à 5 occurences:

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
<table class="even">
	<tr class="even" valign="center"> <!-- class even -->
		<td>du 17/09/2011 09:00:00<br/>au 21/09/2011 18:00:00</td>
		<td>
			<div id="cpt_1"></div>
		</td>
	<tr>
	<SCRIPT LANGUAGE="JavaScript">
		new decompte('21/09/2011 18:00:00','cpt_' + '1'); 
	</SCRIPT>
	<tr class="" valign="center"> <!-- class even -->
		<td>du 20/09/2011 21:00:00<br/>au 23/09/2011 09:30:00</td>
		<td>
			<div id="cpt_2"></div>
		</td>
	<tr>
	<SCRIPT LANGUAGE="JavaScript">
		new decompte('23/09/2011 09:30:00','cpt_' + '2'); 
	</SCRIPT>
	<tr class="even" valign="center"> <!-- class even -->
		<td>du 15/09/2011 07:00:00<br/>au 25/09/2011 07:00:00</td>
		<td>
			<div id="cpt_3"></div>
		</td>
	<tr>
 
	<SCRIPT LANGUAGE="JavaScript">
		new decompte('25/09/2011 07:00:00','cpt_' + '3'); 
	</SCRIPT>
	<tr class="" valign="center"> <!-- class even -->
		<td>du 20/09/2011 22:00:00<br/>au 28/09/2011 08:45:00</td>
		<td>
 
			<div id="cpt_4"></div>
		</td>
	<tr>
	<SCRIPT LANGUAGE="JavaScript">
		new decompte('28/09/2011 08:45:00','cpt_' + '4'); 
	</SCRIPT>
	<tr class="even" valign="center"> <!-- class even -->
		<td>du 21/09/2011 06:00:00<br/>au 29/09/2011 08:45:00</td>
		<td>
			<div id="cpt_5"></div>
		</td>
	<tr>
	<SCRIPT LANGUAGE="JavaScript">
		new decompte('29/09/2011 08:45:00','cpt_' + '5'); 
	</SCRIPT>
</table>

Le code js avec les commentaires:

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
var dat_deb='';
var div_id='';
var nb=0;
 
function decompte(inDate, inDiv) {
 
	dat_deb = inDate;
	div_id = inDiv;
 
	alert("etap "+dat_deb+" "+inDiv);
 
	Maintenant = new Date;
	TempMaintenant = Maintenant.getTime();
 
	Year=dat_deb.substr( 6, 4);
	Month=dat_deb.substr( 3, 2);
	Day=dat_deb.substr( 0, 2);
	Hour=dat_deb.substr( 11, 2);
	Minute=dat_deb.substr( 14, 2);
	Seconde=dat_deb.substr( 17, 2);
 
	Future = new Date(Year, Month - 1, Day , Hour, Minute, Seconde);
	TempFuture = Future.getTime();
 
	DiffSec = Math.floor((TempFuture-TempMaintenant)/1000);
	DiffMin = Math.floor(DiffSec/60);
	DiffHeure = Math.floor(DiffMin/60);
	DiffJour = Math.floor(DiffHeure/24);
 
	while (DiffMin>=60){ DiffMin = DiffMin-60; }
	while (DiffHeure>=24){ DiffHeure = DiffHeure-24; }
	while (DiffSec>=60){ DiffSec = DiffSec-60; }
 
	if (DiffSec<10){ DiffSec = '0' + DiffSec; }
	if (DiffMin<10){ DiffMin = '0' + DiffMin; }
	if (DiffHeure<10){ DiffHeure = '0' + DiffHeure; }
 
	document.getElementById(div_id).innerHTML=' ' + DiffJour + 'j ' + DiffHeure + 'h ' + DiffMin + 'm ' + DiffSec + 's';
 
	//spacefrog setTimeout(function(){ decompte(dat_deb, div_id)}, 1000); 
 
	//galerien69
	/*for(var i=1;i<6;i++){
		(function(id){
		setTimeout(function(){ decompte(dat_deb, "cpt_"+ id)}, 1000);
		})(i);
	}*/
}

J'avoue perdre un peu le fil php-template + js et un peu rouillé.

Merci d'avance!

Salut,

Le tableau infos contient les informations relatives à chaque compteur :

infos[cpt].id = Réference l'élement HTML déstiné à reçevoir le resultat
infos[cpt].time = Temps restant

Il est alimenté par la méthode counter.append(elt,inDate).

La méthode counter.decompte() traitant les données de chaque compteur est appelée à intervalles reguliers jusqu'à ce que tous les compteur soient à zéro.

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
 
var counter={
	infos:[],
 
	append:function(elt,inDate){
		var
			Year,Month,Day,Hour,Minute,Second,time,now,o;
 
		Year=  inDate.substr( 6, 4);
		Month= inDate.substr( 3, 2);
		Day=   inDate.substr( 0, 2);
		Hour=  inDate.substr(11, 2);
		Minute=inDate.substr(14, 2);
		Second=inDate.substr(17, 2);
 
		time=(new Date(Year, Month-1, Day , Hour, Minute, Second)).getTime();
		now=(new Date).getTime();
 
		o={id:document.getElementById(elt), time:Math.floor((time-now)/1000)};
		counter.infos.push(o);
	},
 
	decompte:function(){
		var
			i,v,j,h,m,s,t,fini=true;
 
		for(i in counter.infos){
			v=counter.infos[i].time;
			if(v>0){
				fini=false;
				counter.infos[i].time--;
				j=Math.floor(v/86400);
				h=(Math.floor(v/3600))%24;
				m=(Math.floor(v/60))%60;
				s=v %60;
				t='';
				if(m>0)t=m+' minute'+((m>1)?'s':'');
				if(h>0)t=h+' heure'+((h>1)?'s':'')+((m>0)?', ':'')+t;
				if(j>0)t=j+' jour'+((j>1)?'s':'')+((t!='')?', ':'')+t;
				if(s>0)t=((t!='')?t+' et ':'')+s+' seconde'+((s!=1)?'s':'');
				counter.infos[i].id.innerHTML=t;
			}else
				counter.infos[i].id.innerHTML='Fait';
		}
		if(!fini)setTimeout(counter.decompte,1000);
	}
}

Le template HTML

Code:

1
2
3
4
5
6
<tr class="{PROMO.CLASS}" valign="center">
	<td>
		<div id="cpt_{PROMO.ID_DIV}"></div>
		<script type="text/javascript">counter.append('cpt_{PROMO.ID_DIV}','{PROMO.DAT_FIN}');</script>
	</td>
</tr>

L'appel à la méthode counter.decompte() démarrant le compte à rebours peut se trouver au choix :

Dans la section <head>

Code:

window.onload=counter.decompte;

Ici...

Code:

<body onload="counter.decompte();">

ou bien avant la balise </body>...

Code:

<script type="text/javascript">counter.decompte();</script>

Exemple fonctionnel pour vérification sans template.

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
88
89
90
91
92
93
94
95
96
97
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
	<title>Chrono</title>
	<script type="text/javascript">//<![CDATA[
		var counter={
			infos:[],
 
			append:function(elt,inDate){
				var
					Year,Month,Day,Hour,Minute,Second,time,now,o;
 
				Year=  inDate.substr( 6, 4);
				Month= inDate.substr( 3, 2);
				Day=   inDate.substr( 0, 2);
				Hour=  inDate.substr(11, 2);
				Minute=inDate.substr(14, 2);
				Second=inDate.substr(17, 2);
 
				time=(new Date(Year, Month-1, Day , Hour, Minute, Second)).getTime();
				now=(new Date).getTime();
 
				o={id:document.getElementById(elt), time:Math.floor((time-now)/1000)};
				counter.infos.push(o);
			},
 
			decompte:function(){
				var
					i,v,j,h,m,s,t,fini=true;
 
				for(i in counter.infos){
					v=counter.infos[i].time;
					if(v>0){
						fini=false;
						counter.infos[i].time--;
						j=Math.floor(v/86400);
						h=(Math.floor(v/3600))%24;
						m=(Math.floor(v/60))%60;
						s=v %60;
						t='';
						if(m>0)t=m+' minute'+((m>1)?'s':'');
						if(h>0)t=h+' heure'+((h>1)?'s':'')+((m>0)?', ':'')+t;
						if(j>0)t=j+' jour'+((j>1)?'s':'')+((t!='')?', ':'')+t;
						if(s>0)t=((t!='')?t+' et ':'')+s+' seconde'+((s!=1)?'s':'');
						counter.infos[i].id.innerHTML=t;
					}else
						counter.infos[i].id.innerHTML='Fait';
				}
				if(!fini)setTimeout(counter.decompte,1000);
			}
		}
		window.onload=counter.decompte;
		//]]>
	</script>
</head>
<body>
	<table class="even">
		<tr class="even" valign="center">
			<td>du 17/09/2011 09:00:00<br />au 21/09/2011 18:00:00</td>
			<td>
				<div id="cpt_1"></div>
				<script type="text/javascript">counter.append('cpt_1','21/09/2011 18:00:00');</script>
			</td>
		</tr>
		<tr valign="center">
			<td>du 20/09/2011 21:00:00<br />au 23/09/2011 09:30:00</td>
			<td>
				<div id="cpt_2"></div>
				<script type="text/javascript">counter.append('cpt_2','23/09/2011 09:30:00');</script>
			</td>
		</tr>
		<tr class="even" valign="center">
			<td>du 15/09/2011 07:00:00<br />au 25/09/2011 07:00:00</td>
			<td>
				<div id="cpt_3"></div>
				<script type="text/javascript">counter.append('cpt_3','25/09/2011 07:00:00');</script>
			</td>
		</tr>
		<tr valign="center">
			<td>du 20/09/2011 22:00:00<br />au 28/09/2011 08:45:00</td>
			<td>
 
				<div id="cpt_4"></div>
				<script type="text/javascript">counter.append('cpt_4','28/09/2011 08:45:00');</script>
			</td>
		</tr>
		<tr class="even" valign="center">
			<td>du 21/09/2011 06:00:00<br />au 29/09/2011 08:45:00</td>
			<td>
				<div id="cpt_5"></div>
				<script type="text/javascript">counter.append('cpt_5','29/09/2011 08:45:00');</script>
			</td>
		</tr>
	</table>
</body>
</html>

21/09/2011, 18h49
titix70190

Merci Eric2a, çà marche nickel :D et très bonnes explications!