mettre 2 comptes à rebours dynamique

**Butof** · 10/02/2007, 14h01

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 :

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

**Matthieu2000** · 12/02/2007, 13h38

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 :

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

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

renomme tous tes variables!

**Butof** · 12/02/2007, 18h20

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

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

**SpaceFrog** · 13/02/2007, 09h17

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

**Butof** · 13/02/2007, 13h00

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 :

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

**SpaceFrog** · 13/02/2007, 13h02

heu oui et non ...
comme ceci

Code :

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

1
2
var timer1=new function CountDown_Counter(cible) 
var timer2=new function CountDown_Counter(cible)

avec cible = lieu d'affichage pour le innerhtml

**E.Bzz** · 13/02/2007, 17h53

Bonjour,
si c'est du copié/collé, y a un os

Code :

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

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+

**Butof** · 13/02/2007, 18h14

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

.

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 :

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

**E.Bzz** · 14/02/2007, 08h41

Envoyé par Butof

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

.

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

A+

**Matthieu2000** · 14/02/2007, 10h27

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

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

**Butof** · 14/02/2007, 13h26

Merci pour ta solution, elle me convient parfaitement.

mettre 2 comptes à rebours dynamique

JavaScript

Vue hybride

Discussions similaires

Partager

Partager