Appel multiple compte à rebours

**titix70190** · 19/09/2011, 13h53

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
<!-- BEGIN PROMO -->
<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>
<!-- END PROMO -->

Javascript:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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.

**SpaceFrog** · 19/09/2011, 14h02

en l'instanciant avec une new()

**titix70190** · 19/09/2011, 14h26

Merci SpaceFrog pour ta réponse,

Je viens de mettre dans mon template:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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.

**SpaceFrog** · 19/09/2011, 14h28

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

 cpt=new Array()

Invité · 19/09/2011, 14h36

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

.
Il reste tout de même le problème du markup html, ainsi que des appels à la fonction decompte, qu'on ne connait pas.

**SpaceFrog** · 19/09/2011, 14h46

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 ...

Invité · 19/09/2011, 15h53

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.

**SpaceFrog** · 19/09/2011, 15h56

Dans l'idée ça ressemblerait à

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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

Invité · 19/09/2011, 16h13

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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

**titix70190** · 19/09/2011, 16h13

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

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

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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.

Invité · 19/09/2011, 16h29

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

cpt = cpt||[];

semble plus aproprié!

**titix70190** · 20/09/2011, 21h28

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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!

**Eric2a** · 21/09/2011, 03h09

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 js :

Sélectionner tout - Visualiser dans une fenêtre à part

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 html :

Sélectionner tout - Visualiser dans une fenêtre à part

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 js :

Sélectionner tout - Visualiser dans une fenêtre à part

window.onload=counter.decompte;

Ici...

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

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

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

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

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

Exemple fonctionnel pour vérification sans template.

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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>

**titix70190** · 21/09/2011, 18h49

Merci Eric2a, çà marche nickel

et très bonnes explications!

Appel multiple compte à rebours

JavaScript

Discussions similaires

Partager

Partager