Probleme decompte temps multiple javascript

Fermé
leto23 Messages postés 86 Date d'inscription samedi 17 novembre 2007 Statut Membre Dernière intervention 24 janvier 2010 - 25 août 2009 à 17:52
Ozimandias Messages postés 502 Date d'inscription jeudi 14 mai 2009 Statut Membre Dernière intervention 10 mars 2010 - 26 août 2009 à 10:59
Bonjour,

Je souhaite afficher sur une page plusieurs compteurs de temps en javascript. Un compteur de temps est un compte a rebours qui, a partir d'une date en entrée décroit jusqu'à zéro.

J'ai donc créer un compteur en javascript, mais celui-ci ne marche plus correctement lorsqu'il est présent plusieurs fois. Lorsqu'il y en a plusieurs, on a l'impression que l'un des compteurs prend position sur les autres et que donc les affichages sont modifiés. Utilisé seul, sa marche parfaitement.

Pour l'affichage multiple, je créer avec une boucle différent DIV dont les id sont différent (le nom de l'id est donnée avec un compteur car le nombre de compteur a afficher est variable). Ensuite ma fonction javascript est censé remplir le DIV avec l'id correspondant...

Code PHP qui appel mes fonctions javascript:
[...]
$cpt = 0;
while($res = mysql_fetch_array($req))
{
//creation des id pour les div d'affichage
$temps = "temps".$cpt;
$cpt++;
[...]
<tr><td>ALLER</td><td><?php echo $type; ?></td><td><?php echo $res_cible['nom']; ?></td><td><?php echo "<div id='".$temps."'><SCRIPT LANGUAGE=Javascript>compteur_tps('".$temps."', ".convers($tps).");</SCRIPT></div>"; ?></td></tr>
[...]
}
[...]


Ma fonction javascript est du type: compteur_tps(id_du_div, seconde, minute, heure, jour)
La fonction php convers($nombre_en_seconde) transforme la variable (entier) $nombre_en_seconde en une chaine de caractère du type "seconde, minute, heure, jour".

Le code de la fonction javascript compteur_tps():
function compteur_tps(id_div, s, m, h, j)
{
	sec = s;
	heur = h;
	jour = j;
	min = m;
	stop = "";
	url = "index.php?page=bases";
	
	if( s >0 || m > 0 || h > 0 || j > 0)
	{
		if(s > 0 && s < 60)
		{
			sec = s - 1;
		}
		else if( s == 0)
		{
			if(m > 0 || h > 0 || j > 0)
			{
				sec = 59;
				if(min > 0)
				{
					min = m - 1;
				}
				else if(min == 0)
				{
					if(h > 0 || j > 0)
					{
						min = 59;
						if( heur > 0)
						{
							heur = h -1;
							
						}
						else if( heur == 0)
						{
							if(j > 0)
							{
							heur = 23;
							jour = j - 1;
							}
						}
					}
				}
				
			}
		}

	}

	if (jour == 0 && heur == 0 && min == 0 && sec == 0)
	{
		document.getElementById(id_div).innerHTML=res;
		document.location.href=	url;
	}
	else
	{
		if(jour>0)
		{
				if(sec < 10 && min < 10 && heur < 10)
				{
					res = jour+":"+"0"+heur+":"+"0"+min+":"+"0"+sec+"  "+ stop;
				}
				else if (sec < 10 && heur < 10)
				{
					res = jour+":"+"0"+heur+":"+min+":"+"0"+sec+"  "+ stop;
				}
				else if (heur < 10 && min < 10)
				{
					res = jour+":"+"0"+heur+":"+"0"+min+":"+sec+"  "+ stop;
				}
				else if(sec < 10 && min < 10)
				{
					res = jour+":"+heur+":"+"0"+min+":"+"0"+sec+"  "+ stop;
				}		
				else if(heur < 10)
				{
					res = jour+":"+"0"+heur+":"+min+":"+sec+"  "+ stop;
				}
				else if(sec < 10)
				{
					res = jour+":"+heur+":"+min+":"+"0"+sec+"  "+ stop;
				}
				else if(min < 10)
				{
					res = jour+":"+heur+":"+"0"+min+":"+sec+"  "+ stop;
				}
				else
				{
				        res = jour+":"+heur+":"+min+":"+sec+"  "+ stop;
				}
		}
		else
		{
				if(sec < 10 && min < 10 && heur < 10)
				{
					res = "0"+heur+":"+"0"+min+":"+"0"+sec+"  "+ stop;
				}
				else if (sec < 10 && heur < 10)
				{
					res = "0"+heur+":"+min+":"+"0"+sec+"  "+ stop;
				}
				else if (heur < 10 && min < 10)
				{
					res = "0"+heur+":"+"0"+min+":"+sec+"  "+stop;
				}
				else if(sec < 10 && min < 10)
				{
					res = heur+":"+"0"+min+":"+"0"+sec+"  "+ stop;
				}		
				else if(heur < 10)
				{
					res = "0"+heur+":"+min+":"+sec+"  "+ stop;
				}
				else if(sec < 10)
				{
					res = heur+":"+min+":"+"0"+sec+"  "+ stop;
				}
				else if(min < 10)
				{
					res = heur+":"+"0"+min+":"+sec+"  "+ stop;
				}
				else
				{
					res = heur+":"+min+":"+sec+"  "+ stop;
				}
		}
		
	document.getElementById(id_div).innerHTML=res;
	fonction = "compteur_tps('" + id_div + "', sec, min, heur, jour)";
	setTimeout(fonction, 1000);
	}
}


J'aimerais donc savoir si quelqu'un saurais pourquoi je ne peut pas afficher plusieurs compteurs sur une même page ?
A voir également:

1 réponse

Ozimandias Messages postés 502 Date d'inscription jeudi 14 mai 2009 Statut Membre Dernière intervention 10 mars 2010 46
26 août 2009 à 10:59
Ton : "setTimeout(fonction, 1000);" pose problème.

Il faut l'allouer à une variable différente pour chaque compteur que tu veux faire.

var clock1 = setTimeout(fonction, 1000); // compteur 1
var clock2 = setTimeout(fonction, 1000); // compteur 2
[...]
var clockn = setTimeout(fonction, 1000); // compteur n

sinon, à chaque foi que tu lances un nouveau timer, il va prendre la place du précédent.

En plus, ça te permet si besoin de stopper le timer avec un clearTimeout(variable);
0