Compte à rebours dybamique

orokham · 26 Avril 2010

Bonjour,

Débutant en php, j'ai quelques problèmes avec l'intégration de script Js.

Je dois insérer dans un tableau php/xhtml (lecture du fetch mysql) à la fin de chaque ligne un compte à rebours (hh:mm:ss) en js.

J'ai trouvé un script moyen sur le net mais n'arrive pas à l'adapter pour que chaque ligne de mon tableau ai son compteur en fonctionnement.

Pouvez vous m'aiguiller dans mes recherches ?

Cordialement.

Merci.

**jcaron** · 26 Avril 2010

Si tu nous montrais déjà ce que tu as et là où tu coinces, ça irait peut-être plus vite, non?

Jacques.

orokham · 27 Avril 2010

Alors voila mon code php (dans lequel il y à l'appel au script) :

		echo '<form>';
		// récupération du résultat dans un tableau
			echo '<br><br>';
			echo '<table>';
				echo '<tr>';
					echo '<td colspan="8" color="red"><center>GUERRE : '.$nom_guerre.'</center></td>';
				echo '</tr>';
				echo '<tr>';
					echo '<td><div class="liste_flotte">pseudo</div></td>';
					echo '<td><div class="liste_flotte">nom flotte</div></td>';
					echo '<td><div class="liste_flotte">date flotte</div></td>';		
					echo '<td><div class="liste_flotte">signature</div></td>';		
					echo '<td><div class="liste_flotte">temps de trajet</div></td>';		
					echo '<td><div class="liste_flotte">heure départ flotte</div></td>';							
				echo '</tr>';
				while ($data = mysql_fetch_array($reponse))	{
					echo '<tr>';
						echo '<td><div class="liste_flotte">'.$data['pseudo'].'</div></td>';
						echo '<td><div class="liste_flotte">'.$data['nom_flotte'].'</div></td>';					
						echo '<td><div class="liste_flotte">'.$data['d_f_jour'].'/'.$data['d_f_mois'].'/'.$data['d_f_année'].'</div></td>';
						echo '<td><div class="liste_flotte">'.$data['sign_flotte'].'</div></td>';					
						echo '<td><div class="liste_flotte">'.$data['temps_trajet_hh'].'h'.$data['temps_trajet_mm'].'mn'.$data['temps_trajet_ss'].'s</div></td>';
						echo '<td><div class="liste_flotte">'.temps_impact($data['temps_trajet_hh'],$data['temps_trajet_mm'],$data['temps_trajet_ss']).'</div></td>';
						echo '<td><div class="liste_flotte"><script>.disp_delai().</script></div></td>';
						echo '<input type="hidden">';
					echo '</tr>';
				}
			echo '</table>';
		echo '</form>';

		// Libération des résultats
		mysql_free_result($reponse);

		// Fermeture de la connexion
		mysql_close($base_dd);

et voila le code JS que j'ai trouvé (je ne comprend pas tout, alors ce code marche bien tout seul mais pas dans ma boucle)

D'ailleur ce code indique les années, moi et jour dont je nais pas besoin. Il me faut juste hh:mn:ss et répétable dans un tableau :

	<script LANGUAGE="Javascript">
function disp_delai(){
	document.forms[0].elements[0].value=delai (2010,4,26,14,50);
	setTimeout("disp_delai()",1000);
	}

function delai(annee,mois,jour,heure,min)
	{
	var date_fin=new Date(annee,mois-1,jour,heure,min)
	var date_jour=new Date();
	var tps=(date_fin.getTime()-date_jour.getTime())/1000;
	var j=Math.floor(tps/3600/24); 	// récupere le nb de jour
	tps=tps % (3600*24);
	var h=Math.floor(tps / 3600);		// recupère le nb d'heure
	tps=tps % 3600;
	var m=Math.floor(tps/60);		// récupère le nb minute
	tps=tps % 60
	var s=Math.floor(tps);

	//var txt=j+" j "+h+" h "+m+" min"+s+" sec";
	var txt=+h+"h "+m+"mn "+s+"s";
	date_fin=don_date(date_fin);
	return txt;
	}

function don_date_jour()
	{var date_jour=new Date();
	date_jour=don_date(date_jour);
	return date_jour;}

	function don_date(une_date)
	{var la_date;
	var months=new Array(12);
	months[1]="Janvier";
	months[2]="Février";
	months[3]="Mars";
	months[4]="Avril";
	months[5]="Mai";
	months[6]="Juin";
	months[7]="Juillet";
	months[8]="Aout";
	months[9]="Septembre";
	months[10]="Octobre";
	months[11]="Novembre";
	months[12]="Décembre";

	var days=new Array(7);
	days[1]="Lundi";
	days[2]="Mardi";
	days[3]="Mercredi";
	days[4]="Jeudi";
	days[5]="Vendredi";
	days[6]="Samedi";
	days[7]="Dimanche";

	var month=months[une_date.getMonth() + 1];
	var day=days[une_date.getDay()];
	var date=une_date.getDate();
	var year=une_date.getYear();
}

</SCRIPT>

<html>
<!-- <body onload="disp_delai()"> -->
<form>
<br>
 <form method=get action=""> 
	<input size=25 maxlength=25>
	<script>disp_delai();</script>
	</form> 
</body>
</html>

Modifié 27 Avril 2010 par Dadou
C'est mieux avec la balise code plutôt que cite non??

**jcaron** · 27 Avril 2010

Ben:

- tu gardes les deux fonctions "delai" et "don_date_jour" une seule fois au début de ta page (dans un <script> ... </script évidemment)

- pour chaque ligne de ton tableau, tu généres une fonction disp_delai avec un nom un peu différent (genre disp_delai_1, disp_delai_2, ou en utilisant des ids ou le pseudo...)

- dans cette fonction, tu adaptes la valeur des paramètres de delai()

- le document.forms[0].elements[0].value accède au input du formulaire qu'ils utilisent. Donc soit tu utilises aussi un input (avec un id) et document.getElementById('id_de_l_input').value=..., soit il va falloir faires des choses un tantinent plus compliquées

- tu fais en sorte que dans le setTimeout il s'appelle lui-même (donc tu mets le nom de la fonction qui "change")

- tu appelles la fonction en question.

Il est aussi possible d'utiliser une seule fonction en passant la date de fin en paramètre, mais ça peut être plus compliqué comme modifs.

Et pour les infos "en trop", ben il suffit de les enlever :-)

Jacques.

orokham · 27 Avril 2010

Oups .. que de manip !

Bon je vais mettre ton message devant l'écran, potasser et tenter de faire ce que tu me dit.

Merci bien pour ta réponse (et peut être à plus tard si je sèche trop)

orokham · 27 Avril 2010

Super !!!

Mais il y souvent un "mais" .. le script démarre bien avec les param de l'input mais dès que le setimeout passe mes param sont ignorés.

J'ai appliqué les param juste au 1er disp_delai

<script LANGUAGE="JavaScript">
function disp_delai_1(hh,mm){
	document.getElementById('test1').value=delai (2010,4,27,hh,mm);
	setTimeout("disp_delai_1()",1000);
	}

	function disp_delai_2(){
	document.getElementById('test2').value=delai (2010,4,27,18,00);
	setTimeout("disp_delai_2()",1000);
	}

function delai(annee,mois,jour,heure,min)
	{
	var date_fin=new Date(annee,mois-1,jour,heure,min)
	var date_jour=new Date();
	var tps=(date_fin.getTime()-date_jour.getTime())/1000;
	var j=Math.floor(tps/3600/24);     	// récupere le nb de jour
	tps=tps % (3600*24);
	var h=Math.floor(tps / 3600);		// recupère le nb d'heure
	tps=tps % 3600;
	var m=Math.floor(tps/60);		// récupère le nb minute
	tps=tps % 60
	var s=Math.floor(tps);

	var txt=+h+"h "+m+"mn "+s+"s";
	return txt;
	}
</SCRIPT>

<html>
	<body>
		<form>
			<table>
				<tr>
					<td><input id="test1"><script>disp_delai_1(10,10)</script></td>
				</tr>
				<tr>
					<td><input id="test2"><script>disp_delai_2()</script></td>
				</tr>
			</table>
		</form>    
	</body>
</html>

**jcaron** · 27 Avril 2010

Dans le disp_delai_1 tu as visiblement tenté de suivre la deuxième option que je te proposais, mais dans ce cas, tu dois repasser tes paramètres lors de l'appel via setTimeout, qui doit donc ressembler à quelque chose comme:

setTimeout("disp_delai("+hh+","+mm+")",1000);

par exemple. Si tu fais ça, tu as probablement intérêt à ajouter un paramètre qui indique le champ à mettre à jour, comme ça tu peux utiliser une seule fonction pour tout le monde (seul l'appel initial change). Note que de façon générale, ce n'est pas forcément une bonne idée de ne passer que heures et minutes, il vaut probablement mieux passer la date complète (et mon conseil perso c'est de manipuler la date sous forme d'un timestamp aussi longtemps que possible, ça fait un seul nombre à promener et à manipuler).

Jacques.

orokham · 27 Avril 2010

Yessssss :thumbsup:

Permet moi de te remercier énormément pour ton aide, cher Jacques.

Connexion

Compte à rebours dybamique

Sujets conseillés

orokham

jcaron

orokham

jcaron

orokham

orokham

jcaron

orokham

Veuillez vous connecter pour commenter

Parcourir

Activité