Discussion :

[TarErendis]

bonjour à tous,

J'aurais besoin de votre aide aujourd'hui pour m'aider à créer des compte à rebours multiples sur mon site

j'utilise ce code comme compte à rebours simple

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
echo '<label id="Compte"></label>
        <script type="text/JavaScript">
        var Affiche=document.getElementById("Compte");
        var date1 = new Date();
        var date2 = new Date(' . $tempsFin . ') * 1000;
 
        function Rebour()
        {
            date1 = new Date();
            var sec = (date2 - date1) / 1000;
            var n = 24 * 3600;
            if (sec > 0) {
            j = Math.floor (sec / n);
            h = Math.floor ((sec - (j * n)) / 3600);
            mn = Math.floor ((sec - ((j * n + h * 3600))) / 60);
            sec = Math.floor (sec - ((j * n + h * 3600 + mn * 60)));
            Affiche.innerHTML = "<small>Temps restant: " + j +" J "+ h +" H "+ mn +" Min "+ sec + " Sec </small>";
            window.status = "Temps restant: " + j +" j "+ h +" h "+ mn +" min "+ sec + " s ";
            }          
            tRebour=setTimeout ("Rebour();", 1000);
            }
            Rebour();
            </script>';

mais j'ai besoin de faire une liste d'éléments sur mon site qui ont chacun, sur la même page, leur propre compte à rebours.
j'ai mis ce script dans la boucle php qui liste les éléments avec un id dynamique "Compte'. $i .' " qui s’incrémente à chaque passage dans la boucle... cela s'affiche bien sauf qu'il n'y a qu'un seul des comptes à rebours qui défile... les autres il faut actualiser la page pour que le temps diminue... Je ne maitrisse malheureusement pas très bien le JS... Si quelqu'un voulais bien m'expliquer ou me montrer les modification à faire pour avoir un compte à rebours pour chaque élément de ma boucle php

merci beaucoup d'avance !!

[SpaceFrog]

Sujet déja traité ....
une petite recherche s'impose

http://www.developpez.net/forums/d10...ours-multiple/

http://www.developpez.net/forums/d11...ompte-rebours/

[TarErendis]

J'ai effectivement déjà lut ces deux sujets que j'ai trouvé via google, mais comme je l'ai dit dans mon message je ne maitrise pas vraiment le Jscript et j'aurais besoin que quelqu'un m'explique comment modifier mon bout de code pour cela fonctionne :/

[SpaceFrog]

je ne maitrise pas vraiment le Jscript
Jscript ???
ici c'est javascript ... :grin:

[TarErendis]

désolé, "Java script", excuser le pauvre inculte que je suis qui utilise parfois autre chose que JS ou Java script

[SpaceFrog]

Coller du javascript (tout attaché) en plein milieu du code html est à eviter...

Pour utiliser plusieurs fois la même fonction il faut en appeler une nouvelle instance, comme explique sur les autres posts référencés ci dessus anvec new ...

[TarErendis]

donc je pourrais garde le code quasi tel quel et juste faire un appel dans la boucle ?

[TarErendis]

bon j’essaie d'avancer un peu. dans un fichier JS a part ou je mets mes fonction j'ai mis ceci:

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
function rebour_multiple(tempsFin, idRebour)
{
	var date1 = new Date();
	var date2 = new Date(tempsFin) * 1000;
	var Affiche=document.getElementById('compte'+ idRebour +'');
	var sec = (date2 - date1) / 1000;
	var n = 24 * 3600;
	if (sec > 0) {
	j = Math.floor (sec / n);
	h = Math.floor ((sec - (j * n)) / 3600);
	mn = Math.floor ((sec - ((j * n + h * 3600))) / 60);
	sec = Math.floor (sec - ((j * n + h * 3600 + mn * 60)));
	Affiche.innerHTML = "<small>Temps restant: " + j +" J "+ h +" H "+ mn +" Min "+ sec + " Sec </small>";
	window.status = "Temps restant: " + j +" j "+ h +" h "+ mn +" min "+ sec + " s ";
	}			
	tRebour=setTimeout ("rebour_multiple(tempsFin, idRebour);", 1000);	
}

et ensuite voici le code que ma boucle est censé afficher

Code :

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

1
2
3
4
echo '<label id="compte'. $i . '"></label>';
				echo '<script language="javascript">
				rebour'. $i .' = new rebour_multiple('. $tempsFin .', '. $i .');
				</script>';

$i est un variable qui s'incrémente à chaque passage dans la boucle et
$tempsFin est une variable récupéré dans la base de données à chaque passage dans la boucle car il diffère pour chaque enregistrement

j'ai pu observer que la fonction est appelé, parce que si j’essaie d'afficher du texte ça s'affiche, par contre ça met les comptes à rebours mais ils ne bougent pas, ils s'actualisent que si j'actualise ma page...

[Invité]

voit comme ceci

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
 
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
 
<script type="text/javascript">
 
function rebour_multiple(tempsFin, idRebour){
 
	this.tempsFin=parseInt(tempsFin)
	this.idRebour=document.getElementById('compte'+ idRebour +'');
	var that=this
	rebour()
 
	function rebour(){
 
		var date1 = new Date();
		var date2 = new Date(that.tempsFin) * 1000;
		var sec = (date2 - date1) / 1000;
		var n = 24 * 3600;
 
		j = Math.floor (sec / n);
		h = Math.floor ((sec - (j * n)) / 3600);
		mn = Math.floor ((sec - ((j * n + h * 3600))) / 60);
		sec = Math.floor (sec - ((j * n + h * 3600 + mn * 60)));
		that.idRebour.innerHTML = "<small>Temps restant: " + j +" J "+ h +" H "+ mn +" Min "+ sec + " Sec </small>";
 
		setTimeout(rebour, 1000);	
 
	}
}
 
function initcompteur(){
 
	new rebour_multiple('20', '1');
 
	new rebour_multiple('50', '2');
 
	new rebour_multiple('550', '3');
 
}
 
 
window.onload=initcompteur
</script>
 
	</head><body>
 
		<label id="compte1">00:00:00</label>;
		<br>
		<label id="compte2">00:00:00</label>;
		<br>
		<label id="compte3">00:00:00</label>;
 
	</body></html>

[TarErendis]

ça a l'air pas mal, j’étais en train de m'orienter vers quelque chose dans ce style avant de voir ton post donc je vais tester ça, merci beaucoup

[TarErendis]

bon ben écoute, c'est pas la façon la plus propre de faire, mais ça a le mérite de fonctionner ^^ merci à toi ! problème résolu !!