Plusieurs Compte à rebours JS sur même page ?

Résolu

shoub-tcy Messages postés 173 Statut Membre -
muriel - 26 nov. 2012 à 12:27

Bonjour,

J'ai mis plusieurs comptes à rebours classiques (j : h : min : s) sur la même page mais le problème est qu'il n'y en a qu'un seul qui fonctionne sur tous, les autres affichent bien le temps restant, mais le temps restent figés. Voici le code de l'un des compte à rebours:

<script type="text/JavaScript">
var Affiche=document.getElementById("Compte");
function Rebour() {
var date1 = new Date();
var date2 = new Date ("May 25 13:40:00 2012"); // Date et heure de l'événement
var sec = (date2 - date1) / 1000; // Temps donné en millièmes de seconde
var n = 24 * 3600; //nombre de secondes dans un jour
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)));
if(j == 0){
j = '';
Jour = '';
} else {
Jour = (j == 1) ? "j |" : "j |";
}
if(h == 0){
h = '';
Heure = '';
} else {
Heure = (h == 1) ? "h |" : "h |";
}
if(mn == 0){
mn = '';
Minute = '';
} else {
Minute = (mn == 1) ? "min |" : "min |";
}
if(sec == 0){
sec = '';
Seconde = '';
Et = '';
} else {
Seconde = (sec == 1) ? "sec" : "sec";
Et = (mn == 0 && h == 0 && j == 0) ? "" : "";
}
Affiche.innerHTML = j + ' ' + Jour + ' ' + h + ' ' + Heure + ' ' + mn + ' ' + Minute + ' ' + Et + ' ' + sec + ' ' + Seconde;
}
else {
}

tRebour=setTimeout ("Rebour();", 1000);
}
Rebour();
</script>

Si vous avez des idées pour pouvoir faire fonctionner plusieurs compte à rebours de ce type sur la même page ou une autre solution, n'hésitez pas à me le fair savoir :)

Cordialement

Afficher la suite

3 réponses

Alain_42 Messages postés 5413 Statut Membre 904

Bon ben voilà je t'ai modifié ton script, chez moi ça fonctionne sous FireFox

<html>
<script type="text/JavaScript">
function Rebour(date_event,id_compte_rebours) {
	var Affiche=document.getElementById(id_compte_rebours);
	var date1 = new Date();
	var date2 = new Date (date_event); // Date et heure de l'événement
	var sec = (date2 - date1) / 1000; // Temps donné en millièmes de seconde
	var n = 24 * 3600; //nombre de secondes dans un jour
	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)));
		if(j == 0){
			j = '';
			Jour = '';
		} else {
			Jour = (j == 1) ? "j <span class='or'>|</span>" : "j <span class='or'>|</span>";
		}
		if(h == 0){
			h = '';
			Heure = '';
		} else {
			Heure = (h == 1) ? "h <span class='or'>|</span>" : "h <span class='or'>|</span>";
		}
		if(mn == 0){
			mn = '';
			Minute = '';
		} else {
			Minute = (mn == 1) ? "min <span class='or'>|</span>" : "min <span class='or'>|</span>";
		}
		if(sec == 0){
			sec = '';
			Seconde = '';
			Et = '';
		} else {
			Seconde = (sec == 1) ? "sec" : "sec";
			Et = (mn == 0 && h == 0 && j == 0) ? "" : "";
		}
			Affiche.innerHTML = j + ' ' + Jour + ' ' + h + ' ' + Heure + ' ' + mn + ' ' + Minute + ' ' + Et + ' ' + sec + ' ' + Seconde;
	}else{
		Affiche.innerHTML="<font color=\"red\">C'est fini !!</font>";
	
	}
}

</script> 
Compte à rebours 1:<div id="compte_rebours_1"></div><br /><br />
Compte à rebours 2:<div id="compte_rebours_2"></div><br /><br />
Compte à rebours 3:<div id="compte_rebours_3"></div><br /><br />
Compte à rebours 4:<div id="compte_rebours_4"></div><br /><br />
Compte à rebours 5:<div id="compte_rebours_5"></div><br /><br />
<script type="text/JavaScript">
//il vaut mieux mettre cette partie après les div à cause des id
setInterval(function(){Rebour('May 25 13:40:00 2012','compte_rebours_1');}, 1000);
setInterval(function(){Rebour('June 15 15:35:05 2012','compte_rebours_2');}, 1000);
setInterval(function(){Rebour('June 28 10:30:18 2012','compte_rebours_3');}, 1000);
setInterval(function(){Rebour('June 30 8:10:30 2012','compte_rebours_4');}, 1000);
setInterval(function(){Rebour('May 15 8:20:50 2012','compte_rebours_5');}, 1000);

</script>
</html>

muriel

Comment je fais pour régler la date de référence? je voudrais que la référence qoit le calendrier standard du jour ou on consulte le site...Merci beaucoup pour votre réponse.
0

Réponse 2 / 3
shoub-tcy Messages postés 173 Statut Membre 2

up :)
0
Réponse 3 / 3
shoub-tcy Messages postés 173 Statut Membre 2

Génial, merci pour cette modification, et le conseil, ça marche à merveille :)
Tu as résolue mon problème! Encore merci :)
0

Plusieurs Compte à rebours JS sur même page ?

3 réponses

Discussions similaires

Newsletters