Probleme decompte temps multiple javascript

leto23 Messages postés 86 Date d'inscription   Statut Membre Dernière intervention   -  
Ozimandias Messages postés 505 Date d'inscription   Statut Membre Dernière intervention   -
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 505 Date d'inscription   Statut Membre Dernière intervention   46
 
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