mon chronometre ne se duplique pas

Version imprimable

salut a tous ! 'oilou, ce coup ci, j'ai un probleme de chronometre :

J'ai une page ou j'ai besoin d'afficher 3 compte a rebourds differents :

j'ai donc fait ceci :

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
 
<SCRIPT language="Javascript">
function IndiquerSecondes(sec)
			{
				secondes = sec;
			}
			function Chrono(i)
			{
				if (secondes > 0)
				{
					var minutes = Math.floor(secondes/60);
					var heures = Math.floor(minutes/60);
					secondes -= minutes * 60;
					if (heures > 0)
					{
						minutes -= heures * 60;
						if (minutes > 0)
						{
							text = "Il reste " + heures + ' h ' + minutes + ' min ' + secondes + ' sec';
						}
						else
						{	
							text = "Il reste " + heures + ' h ' + secondes + ' sec';
						}
						minutes = minutes + (heures * 60);
						secondes = secondes + (minutes * 60) - 1;
 
					}
					else if (minutes > 0)
					{
						text = "Il reste " + minutes + ' min ' + secondes + ' sec';
						secondes = secondes + (minutes * 60) - 1;
					}
					else
					{
						text = "Il reste " + secondes + ' sec';
						secondes = secondes + (minutes * 60) - 1;
					}
				}
				else
				{
					clearInterval(timer);
					text = "Le temps est écoulé";
				}
				document.getElementById('chrono'+i).innerHTML = text;
			}
			function DemarrerChrono(i)
			{
				timer = setInterval('Chrono('+i+')', 1000);				
			}
</SCRIPT>
 
<?php 
$i=0;//a la fin, $i==2
foreach($this->basicNiveauActuel as $exp){
?>
L ARRIVEE EST PREVU POUR : <div id='chrono<?php echo $i;?>'></div>
					<SCRIPT language="Javascript">IndiquerSecondes(<?php echo $exp['usc_date']-time();?>);DemarrerChrono(<?php echo $i;?>);</SCRIPT>
<?php
}

mais mes trois divs chrono0, chrono1 et chrono2 affichent le meme decompte, qui est en plus 3 fois plus rapide ! on passe de 3 secondes en 3 secondes !

comment faire siouplais pour dupliquer ce script ? actuellement, il ne marche que si je n'ai qu'un seul chrono a afficher !

d'avance merci les gars !

Il vaut mieux passer par un objet que tu instancies, car là tu as des variables globales qui trainent et ce n'est pas bon.
Ensuite dans ton code interne pour le calcul des heures/minutes/secondes, on peut le réduire à 4 lignes en utilisant Date() qui fera le calcul à ta place :)

Code:

1
2
3
4
5
6
 
var d = new Date(0,0,0,0,0,_this.current),
            h=d.getHours(),
            m=d.getMinutes(),
            s=d.getSeconds();
            text = 'Il reste ' + (h>0 ? h + ' h ':'') + (m>0 ? m+' min ':' ') + (s>0 ?+s+' s ':' ');

Pour finir il ne reste plus qu'à mettre ce code dans un objet et faire en sorte que cet objet soit paramétrable :

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
 
var chrono = function(start, callback) {
    var _this = this;
    this.start = start;
    this.current = start;
 
    var calc = function() {
        var text = '';
        if(_this.current>0) {
            var d = new Date(0,0,0,0,0,_this.current),
            h=d.getHours(),
            m=d.getMinutes(),
            s=d.getSeconds();
            text = 'Il reste ' + (h>0 ? h + ' h ':'') + (m>0 ? m+' min ':' ') + (s>0 ?+s+' s ':' ');
            _this.current--;
        } else {
            clearInterval(_this.timer);
            text = 'Le temps est écoulé';
        }
        if(typeof callback == 'string') {
            document.getElementById(callback).innerHTML = text;
        } else {
            callback(text);
        }
    }
 
    this.timer = setInterval(calc, 1000);
};
 
new chrono(4346, 'chrono1'); // va dans <div id="chrono1"></div>
new chrono(6587, 'chrono2');
new chrono(56, 'chrono3');
new chrono(132, function(text) { //possibilité d'utiliser une fonction de calback pour faire le code que tu veux ensuite
      console.log(text);   
});

Exemple ici : http://jsfiddle.net/zFHzG/3/

22/01/2012, 11h29
kaking

:D:D:D:D:D:D

merci beaucoup, ca marche super !!!

tres efficace !

a bientot !
-un developpeur tres reconnaissant