mettre 2 comptes à rebours dynamique

Version imprimable

Bonjour,
J'ai un petit probleme de compte à rebours dynamique. Je voudrais afficher 2 compteurs sur ma page mais impossible de trouver la variable à modifier pour que ca marche.
Je souhaite donc faire plusieurs compte a rebours.
Voici le code comportant les 2 comptes à rebours: ce code affiche bien les deux temps max sauf que le premier n'évolue pas, par contre le deuxieme marche impecable.
Je pense que le plus propre (point de vue codage) est de faire une fonction unique mais je n'ai pas reussi, tjs le meme probleme du premier compteur qui reste statique.
Merci de bien vouloir m'aider,

--------------------------------------------------------------------------------

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
<BODY>
<DIV ID="Counter"></DIV>
<SCRIPT type="text/javascript">
 
 
var Seconds_Counter = 500; 
var Target_Counter = document.getElementById('Counter'); 
var Target_Time_Counter = new Date();
var Time_Beginn_Counter = Target_Time_Counter.getTime();
var Time_End_Counter = Time_Beginn_Counter + (Seconds_Counter*1000);
Target_Time_Counter.setTime(Time_End_Counter);
CountDown_Counter(); 
 
function CountDown_Counter() 
{
var Current_Date_Counter = new Date();
var Curren_tTime_Counter = Current_Date_Counter.getTime()
var Open_Time_Counter = Math.floor((Target_Time_Counter-Curren_tTime_Counter)/1000);
var s_Counter = Open_Time_Counter % 60;
var m_Counter = ((Open_Time_Counter-s_Counter)/60) % 60;
var h_Counter = ((Open_Time_Counter-s_Counter-m_Counter*60)/(60*60));
var fh_Counter = ((h_Counter < 10) ? "0" : "") + h_Counter + "h ";
var fm_Counter = ((m_Counter < 10) ? "0" : "") + m_Counter + "min ";
var fs_Counter = ((s_Counter < 10) ? "0" : "") + s_Counter + "sec";
var Time_Counter = fh_Counter + fm_Counter + fs_Counter;
var Output_String_Counter=Time_Counter;
if(Open_Time_Counter<=0) 
{ 
Target_Counter.innerHTML= "terminé"; 
}
else
{
Target_Counter.innerHTML= "fini ds " + Output_String_Counter; 
window.setTimeout("CountDown_Counter()",1000);
}
}
</SCRIPT>
</div>
 
 
DEUXIEME COMPTEUR:
 
<DIV ID="Counter_2"></DIV>
<SCRIPT type="text/javascript">
 
var Seconds_Counter = 200;
var Target_Counter = document.getElementById('Counter_2'); 
var Target_Time_Counter = new Date();
var Time_Beginn_Counter = Target_Time_Counter.getTime();
var Time_End_Counter = Time_Beginn_Counter + (Seconds_Counter*1000);
Target_Time_Counter.setTime(Time_End_Counter);
CountDown_Counter_2(); 
 
function CountDown_Counter_2() 
{
var Current_Date_Counter = new Date();
var Curren_tTime_Counter = Current_Date_Counter.getTime()
var Open_Time_Counter = Math.floor((Target_Time_Counter-Curren_tTime_Counter)/1000);
var s_Counter = Open_Time_Counter % 60;
var m_Counter = ((Open_Time_Counter-s_Counter)/60) % 60;
var h_Counter = ((Open_Time_Counter-s_Counter-m_Counter*60)/(60*60));
var fh_Counter = ((h_Counter < 10) ? "0" : "") + h_Counter + "h ";
var fm_Counter = ((m_Counter < 10) ? "0" : "") + m_Counter + "min ";
var fs_Counter = ((s_Counter < 10) ? "0" : "") + s_Counter + "sec";
var Time_Counter = fh_Counter + fm_Counter + fs_Counter;
var Output_String_Counter=Time_Counter;
if(Open_Time_Counter<=0) 
{ 
Target_Counter.innerHTML= "terminé"; 
}
else
{
Target_Counter.innerHTML= "fini ds " + Output_String_Counter; 
window.setTimeout("CountDown_Counter_2()",1000);
}
}
 
</SCRIPT>
</div>
</BODY>

12/02/2007, 13h38
Matthieu2000

Citation:

Envoyé par Butof

Voici le code comportant les 2 comptes à rebours: ce code affiche bien les deux temps max sauf que le premier n'évolue pas, par contre le deuxieme marche impecable.

cause ->

Code:

var Target_Counter = document.getElementById('Counter_2');

renomme tous tes variables!
12/02/2007, 18h20
Butof

Merci de m'avoir repondu mais ta reponse ne m'éclaire pas trop 8O

Tu me demande de renommer toutes mes variables, sauf que je vois pas les quelles, j'ai deja essayé de renommer mais cela n'afficher plus le deuxième compteur, je dois trop modifier.

Quand tu dis renommer c'est comme ca (si oui ca marche pas ^^):

var Target_Counter = document.getElementById('Counter_2');
var Target_Time_Counter_2 = new Date();
var Time_Beginn_Counter_2 = Target_Time_Counter_2.getTime();

Merci pour ton aide
13/02/2007, 09h17
SpaceFrog

il faut faire une seule focntion timer et une nouvelle instance de la fonction pour chaque nouveau compte à rebours ...

J'ai créé une seule fonction timer mais point de vue instance ca devient plus chaud. Parles tu de passer un argument ds l'appel de la fonction timer ou d'autre chose?
meci de ton aide

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
<SCRIPT type="text/javascript">
function CountDown_Counter() 
{ 
var Current_Date_Counter = new Date();
var Curren_tTime_Counter = Current_Date_Counter.getTime()
var Open_Time_Counter = Math.floor((Target_Time_Counter-Curren_tTime_Counter)/1000);
var s_Counter = Open_Time_Counter % 60;
var m_Counter = ((Open_Time_Counter-s_Counter)/60) % 60;
var h_Counter = ((Open_Time_Counter-s_Counter-m_Counter*60)/(60*60));
var fh_Counter = ((h_Counter < 10) ? "0" : "") + h_Counter + "h ";
var fm_Counter = ((m_Counter < 10) ? "0" : "") + m_Counter + "min ";
var fs_Counter = ((s_Counter < 10) ? "0" : "") + s_Counter + "sec";
var Time_Counter = fh_Counter + fm_Counter + fs_Counter;
var Output_String_Counter=Time_Counter;
if(Open_Time_Counter<=0) 
{ 
Target_Counter.innerHTML= "terminé"; 
}
else
{
Target_Counter.innerHTML= "fini ds " + Output_String_Counter; 
window.setTimeout("CountDown_Counter()",1000);
}
}
</SCRIPT>
 
<BODY>
<DIV ID="Counter"></DIV>
<SCRIPT type="text/javascript">
var Seconds_Counter = 500; 
var Target_Counter = document.getElementById('Counter'); 
var Target_Time_Counter = new Date();
var Time_Beginn_Counter = Target_Time_Counter.getTime();
var Time_End_Counter = Time_Beginn_Counter + (Seconds_Counter*1000);
Target_Time_Counter.setTime(Time_End_Counter);
CountDown_Counter(); 
</SCRIPT>
</div>
 
<DIV ID="Counter_2"></DIV>
<SCRIPT type="text/javascript">
var Seconds_Counter = 100; 
var Target_Counter = document.getElementById('Counter_2'); 
var Target_Time_Counter = new Date();
var Time_Beginn_Counter = Target_Time_Counter.getTime();
var Time_End_Counter = Time_Beginn_Counter + (Seconds_Counter*1000);
Target_Time_Counter.setTime(Time_End_Counter);
CountDown_Counter(); 
</SCRIPT>
</div>
 
</BODY>

13/02/2007, 13h02
SpaceFrog
heu oui et non ...
comme ceci
Code:

1 2 var timer1=new function CountDown_Counter(cible) var timer2=new function CountDown_Counter(cible)
avec cible = lieu d'affichage pour le innerhtml

alors la c'est du petit chinois :lol: .

Lieu d'affichage pour le innerhtml, ce n'est pas le postionnement de mon appel de fonction qui determine l'emplacement de l'affichage sur ma page.
Et dans ma fonction timer, je fais intervenir comment cette varaible "cible"?

Désolé mais la je ne vois pas.

Simplification du 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
<SCRIPT type="text/javascript">
function CountDown_Counter() 
{ 
var Current_Date_Counter = new Date();
var Curren_tTime_Counter = Current_Date_Counter.getTime()
var Open_Time_Counter = Math.floor((Target_Time_Counter-Curren_tTime_Counter)/1000);
var s_Counter = Open_Time_Counter % 60;
var m_Counter = ((Open_Time_Counter-s_Counter)/60) % 60;
var h_Counter = ((Open_Time_Counter-s_Counter-m_Counter*60)/(60*60));
var fh_Counter = ((h_Counter < 10) ? "0" : "") + h_Counter + "h ";
var fm_Counter = ((m_Counter < 10) ? "0" : "") + m_Counter + "min ";
var fs_Counter = ((s_Counter < 10) ? "0" : "") + s_Counter + "sec";
var Time_Counter = fh_Counter + fm_Counter + fs_Counter;
var Output_String_Counter=Time_Counter;
if(Open_Time_Counter<=0) 
{ 
Target_Counter.innerHTML= "terminé"; 
}
else
{
Target_Counter.innerHTML= "fini ds " + Output_String_Counter; 
window.setTimeout("CountDown_Counter()",1000);
}
}
</SCRIPT>
 
<BODY>
<DIV ID="Counter"></DIV>
<SCRIPT type="text/javascript">
var Seconds_Counter = 500; 
var Target_Counter = document.getElementById('Counter'); 
var Target_Time_Counter = new Date();
var Time_Beginn_Counter = Target_Time_Counter.getTime();
var Time_End_Counter = Time_Beginn_Counter + (Seconds_Counter*1000);
Target_Time_Counter.setTime(Time_End_Counter);
 
var timer1=new function CountDown_Counter(cible) 
var timer2=new function CountDown_Counter(cible)
 
timer1();
timer2(); 
 
</SCRIPT>
</div>
 
</BODY>

13/02/2007, 13h22
SpaceFrog
non le lieu d'affichage est déterminé ici ...

Code:

var Target_Counter = document.getElementById('Counter')

tu dois donc avoir dans le body un div ou un objet avec pour id counter

avec la solution donnée plus haut il te faudra modifier le target pour chaque instance en passant l'id en paramètre:

la fonction deviendra:

Code:

function CountDown_Counter(cible) {...

lieu d'affichage deviendra:

Code:

var Target_Counter = document.getElementById(cible)

tu auras deux elements différents sur la page avec des id différents
par ex: affcounter_1 et affcounter_2

et les appels:
Code:

1 2 3 var timer1=new function CountDown_Counter('affcounter_1') var timer2=new function CountDown_Counter('affcounter_2')

J'ai modifier mon code mais cela ne marche tjs pas :aie: , je pense que l'erreur vient de l'appel de la fonction (et encore, il doit en en avoir d'autre...) mais je vois pas comment je pourrais faire.

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
 
<head>
<SCRIPT type="text/javascript">
function CountDown_Counter(cible)
{ 
var Target_Counter = document.getElementById(cible);
var Current_Date_Counter = new Date();
var Curren_tTime_Counter = Current_Date_Counter.getTime();
var Open_Time_Counter = Math.floor((Target_Time_Counter-Curren_tTime_Counter)/1000);
var s_Counter = Open_Time_Counter % 60;
var m_Counter = ((Open_Time_Counter-s_Counter)/60) % 60;
var h_Counter = ((Open_Time_Counter-s_Counter-m_Counter*60)/(60*60));
var fh_Counter = ((h_Counter < 10) ? "0" : "") + h_Counter + "h ";
var fm_Counter = ((m_Counter < 10) ? "0" : "") + m_Counter + "min ";
var fs_Counter = ((s_Counter < 10) ? "0" : "") + s_Counter + "sec";
var Time_Counter = fh_Counter + fm_Counter + fs_Counter;
var Output_String_Counter=Time_Counter;
if(Open_Time_Counter<=0) 
{ 
Target_Counter.innerHTML= "terminé"; 
}
else
{
Target_Counter.innerHTML= "fini ds " + Output_String_Counter; 
window.setTimeout("CountDown_Counter(cible)",1000);
}
}
</SCRIPT>
</head>
 
<BODY>
<DIV ID="Counter"></DIV>
<DIV ID="affcounter_1"></DIV>
<DIV ID="affcounter_2"></DIV>
 
<SCRIPT type="text/javascript">
var Seconds_Counter = 500; 
 
var Target_Time_Counter = new Date();
var Time_Beginn_Counter = Target_Time_Counter.getTime();
var Time_End_Counter = Time_Beginn_Counter + (Seconds_Counter*1000);
 
var timer1=new function CountDown_Counter('affcounter_1') ;
 
var Seconds_Counter = 100; 
var Target_Time_Counter = new Date();
var Time_Beginn_Counter = Target_Time_Counter.getTime();
var Time_End_Counter = Time_Beginn_Counter + (Seconds_Counter*1000);
 
var timer2=new function CountDown_Counter('affcounter_2');
 
</SCRIPT>
</BODY>

13/02/2007, 17h53
E.Bzz
Bonjour,
si c'est du copié/collé, y a un os
Code:

1 2 </SCRIPT> <BODY>
Déjà, c'est louche.
Bref, mets au moins les "function() {}" dans le <head> (ou ferme le <head>, ce qui doit être kif-kif en résultat) ;)

A+

J'ai modifier les balises mais bon, je pense pas que le probleme vient de la 8O .

J'ai changé mon code, ds celui ci, les deux compte à rebours fonctionne mais je n'ai pas fai de fonction commune, problematique pour x compteurs.
C'est un peu ds le desordre, il y a debut la fonction du premier compteur puis l'appel de cette fonction, ensuite il a l'appel du 2 compteur puis la fonction de celui ci.
Le but etant de faire fonction commune compteur puis l'appel compteur 1 et l'appel compteur 2.

Si quelqu'un pouvais m'aider, merci d'avance.

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
<HEAD>
<SCRIPT type="text/javascript">
function CountDown_Counter() 
 {
 var Target_Counter = document.getElementById('Counter'); 
 var Current_Date_Counter = new Date();
 var Curren_tTime_Counter = Current_Date_Counter.getTime()
 var Open_Time_Counter = Math.floor((Target_Time_Counter-Curren_tTime_Counter)/1000);
 var s_Counter = Open_Time_Counter % 60;
 var m_Counter = ((Open_Time_Counter-s_Counter)/60) % 60;
 var h_Counter = ((Open_Time_Counter-s_Counter-m_Counter*60)/(60*60));
 var fh_Counter  = ((h_Counter < 10) ? "0" : "") + h_Counter + "h ";
 var fm_Counter  = ((m_Counter < 10) ? "0" : "") + m_Counter + "min ";
 var fs_Counter  = ((s_Counter < 10) ? "0" : "") + s_Counter + "sec";
 var Time_Counter = fh_Counter + fm_Counter + fs_Counter;
 var Output_String_Counter=Time_Counter;
 if(Open_Time_Counter<=0) 
  { 
  Target_Counter.innerHTML=  "terminé";  
  }
 else
  {
  Target_Counter.innerHTML= "fini ds " + Output_String_Counter; 
  window.setTimeout("CountDown_Counter()",1000);
  }
 }
</SCRIPT>
</HEAD>
 
<BODY>
<DIV ID="Counter"></DIV>
<SCRIPT type="text/javascript">
var Seconds_Counter = 500;
var Target_Time_Counter = new Date();
var Time_Beginn_Counter = Target_Time_Counter.getTime();
var Time_End_Counter = Time_Beginn_Counter + (Seconds_Counter*1000);
Target_Time_Counter.setTime(Time_End_Counter);
CountDown_Counter(); 
</SCRIPT>
</div>
 
DEUXIEME COMPTEUR:
 
<DIV ID="Counter_2"></DIV>
<SCRIPT type="text/javascript">
 
var Seconds_Counter = 100; // indique la durée du compte à rebours en secondes
var Target_Time_Counter2 = new Date();
var Time_Beginn_Counter = Target_Time_Counter2.getTime();
var Time_End_Counter = Time_Beginn_Counter + (Seconds_Counter*1000);
Target_Time_Counter2.setTime(Time_End_Counter);
CountDown_Counter2();
 
function CountDown_Counter2(){
var Target_Counter2 = document.getElementById('Counter_2');
var Current_Date_Counter = new Date();
var Curren_tTime_Counter = Current_Date_Counter.getTime()
var Open_Time_Counter = Math.floor((Target_Time_Counter2-Curren_tTime_Counter)/1000);
var s_Counter = Open_Time_Counter % 60;
var m_Counter = ((Open_Time_Counter-s_Counter)/60) % 60;
var h_Counter = ((Open_Time_Counter-s_Counter-m_Counter*60)/(60*60));
var fh_Counter  = ((h_Counter < 10) ? "0" : "") + h_Counter + "h ";
var fm_Counter  = ((m_Counter < 10) ? "0" : "") + m_Counter + "min ";
var fs_Counter  = ((s_Counter < 10) ? "0" : "") + s_Counter + "sec";
var Time_Counter = fh_Counter + fm_Counter + fs_Counter;
var Output_String_Counter=Time_Counter;
if(Open_Time_Counter<=0){
    Target_Counter2.innerHTML=  "termine";
  }
  else{
    Target_Counter2.innerHTML= "fini ds " + Output_String_Counter;
    window.setTimeout("CountDown_Counter2()",1000);
  }
}
</SCRIPT>

14/02/2007, 08h41
E.Bzz

Citation:

Envoyé par Butof

J'ai modifier les balises mais bon, je pense pas que le probleme vient de la 8O .

Peut-être pas, mais ce qui es sûr c'est que ça devait pas aider ;)

A+

pas beau, mais c'est dans l'idée...

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
<html>
<HEAD>
<SCRIPT type="text/javascript">
function CountDown_Counter(idCalque, Target_Time_CounterVar,duree) 
 {
 var Target_Counter = document.getElementById(idCalque); 
 var Current_Date_Counter = new Date();
 var Curren_tTime_Counter = Current_Date_Counter.getTime()
 var Open_Time_Counter = duree+Math.floor((Target_Time_CounterVar-Curren_tTime_Counter)/1000);
 var s_Counter = Open_Time_Counter % 60;
 var m_Counter = ((Open_Time_Counter-s_Counter)/60) % 60;
 var h_Counter = ((Open_Time_Counter-s_Counter-m_Counter*60)/(60*60));
 var fh_Counter  = ((h_Counter < 10) ? "0" : "") + h_Counter + "h ";
 var fm_Counter  = ((m_Counter < 10) ? "0" : "") + m_Counter + "min ";
 var fs_Counter  = ((s_Counter < 10) ? "0" : "") + s_Counter + "sec";
 var Time_Counter = fh_Counter + fm_Counter + fs_Counter;
 var Output_String_Counter=Time_Counter;
 if(Open_Time_Counter<=0) 
  { 
  Target_Counter.innerHTML=  "terminé";  
  }
 else
  {
  Target_Counter.innerHTML= "fini ds " + Output_String_Counter; 
 
  }
 }
</SCRIPT>
</HEAD>
 
<BODY>
<DIV ID="Counter"></DIV>
 
DEUXIEME COMPTEUR:
 
<DIV ID="Counter_2"></DIV>
<SCRIPT type="text/javascript">
dateTmp=new Date();
counter1=setInterval(function(){CountDown_Counter("Counter",dateTmp,500); },1000);
counter2=setInterval(function(){CountDown_Counter("Counter_2",dateTmp,100); },1000);
 
</SCRIPT>
</body>
</html>

14/02/2007, 13h26
Butof

Merci pour ta solution, elle me convient parfaitement.