Compte à rebours javascript ne marche pas

Fermé
chuckichucki - 16 janv. 2011 à 14:56
xamurai Messages postés 223 Date d'inscription mardi 11 janvier 2011 Statut Membre Dernière intervention 19 février 2013 - 16 janv. 2011 à 16:58
Bonjour,

Je voudrais afficher 2 comptes à rebours en javascript sur ma page.

Voici le code source tel qu'il apparait, mais cela ne marche pas. Le compte à rebours n'apparait pas. Savez vous pourquoi ?

<span id="rebours0"></span>
<span id="rebours1"></span>

 <script type="text/javascript">
function chrono(){


var secon0=46 ;//initialise les secondes
var minu0=54; //initialise les minutes
var heur0=13; //initialise les heures

if (secon0 != 0 || minu0 != 0 || heur0 != 0){// si on n'atteind pas 00:00:00
	secon0--;
	if (secon0<0){secon0=59;
	if (minu0 >0){ minu0--}else{minu0=59; heur0--;}
}
if (secon0 < 10 ){ secondes0 = '0'+secon0;}else {secondes0 = secon0;}
if (minu0 < 10 ) {minutes0 = '0'+minu0;}else {minutes0 = minu0;}
if (heur0 < 10 ) {heures0 = '0'+heur0;}else {heures0 = heur0;}

document.getElementById('rebours0').innerHTML = heures0+' heures '+minutes0+' minutes '+secondes0+' secondes ' ;

var secon1=46 ;//initialise les secondes
var minu1=54; //initialise les minutes
var heur1=13; //initialise les heures

if (secon1 != 0 || minu1 != 0 || heur1 != 0){// si on n'atteind pas 00:00:00
	secon1--;
	if (secon1<0){secon1=59;
	if (minu1 >0){ minu1--}else{minu1=59; heur1--;}
}
if (secon1 < 10 ){ secondes1 = '0'+secon1;}else {secondes1 = secon1;}
if (minu1 < 10 ) {minutes1 = '0'+minu1;}else {minutes1 = minu1;}
if (heur1 < 10 ) {heures1 = '0'+heur1;}else {heures1 = heur1;}

document.getElementById('rebours1').innerHTML = heures1+' heures '+minutes1+' minutes '+secondes1+' secondes ' ;

}
compte=setTimeout('chrono()',1000) //la fonction est relancée tous les secondes
chrono();
</script>



Merci
A voir également:

3 réponses

xamurai Messages postés 223 Date d'inscription mardi 11 janvier 2011 Statut Membre Dernière intervention 19 février 2013 15
Modifié par xamurai le 16/01/2011 à 15:21
essaye ceci:
ta fonction reinitialise les variables à chaque appel.
en plus les conditions ne sont pas fermées convenablement:
var secon0=46 ;//initialise les secondes 
  var minu0=54; //initialise les minutes 
  var heur0=13; //initialise les heures 
  var secon1=46 ;//initialise les secondes 
  var minu1=54; //initialise les minutes 
  var heur1=13; //initialise les heures 
function chrono(){ 
   
  if (secon0 != 0 || minu0 != 0 || heur0 != 0){// si on n'atteind pas 00:00:00 
   secon0--; 
   if (secon0<0){secon0=59; 
    if (minu0 >0){ minu0--}else{minu0=59; heur0--;} 
    } 
    if (secon0 < 10 ){ secondes0 = '0'+secon0;}else {secondes0 = secon0;} 
    if (minu0 < 10 ) {minutes0 = '0'+minu0;}else {minutes0 = minu0;} 
    if (heur0 < 10 ) {heures0 = '0'+heur0;}else {heures0 = heur0;} 
    document.getElementById('rebours0').innerHTML = heures0+' heures '+minutes0+' minutes '+secondes0+' secondes ' ; 
    if (secon1 != 0 || minu1 != 0 || heur1 != 0){// si on n'atteind pas 00:00:00 
     secon1--; 
     if (secon1<0){secon1=59; 
     if (minu1 >0){ minu1--}else{minu1=59; heur1--;} 
    } 
    if (secon1 < 10 ){ secondes1 = '0'+secon1;}else {secondes1 = secon1;} 
    if (minu1 < 10 ) {minutes1 = '0'+minu1;}else {minutes1 = minu1;} 
    if (heur1 < 10 ) {heures1 = '0'+heur1;}else {heures1 = heur1;} 
    document.getElementById('rebours1').innerHTML = heures1+' heures '+minutes1+' minutes '+secondes1+' secondes ' ; 
   } 
setTimeout(chrono,1000) //la fonction est relancée tous les secondes 
   } 
 
} 

chrono(); 
0
chuckichucki
16 janv. 2011 à 16:04
Cool merci xamurai ! Ton exemple marche

En fait je voudrais afficher 10 compte à rebours sur une page donc je fais des boucles php
Mais bizarrement ca buggue.

Pour trouver l'origine du bug j'ai repris ton code en essayant de mettre une 3eme entree. Voici le code ci-dessous

Désolé je suis vraiment nul en JavaScript et merci de ton aide.

<span id="rebours0"></span><span id="rebours1"></span><span id="rebours2"></span>

<script type="text/javascript">
var secon0=46 ;//initialise les secondes 
  var minu0=54; //initialise les minutes 
  var heur0=13; //initialise les heures 
  var secon1=46 ;//initialise les secondes 
  var minu1=54; //initialise les minutes 
  var heur1=13; //initialise les heures 
  var secon2=46 ;//initialise les secondes 
  var minu2=54; //initialise les minutes 
  var heur2=13; //initialise les heures 


function chrono(){ 
   
  if (secon0 != 0 || minu0 != 0 || heur0 != 0){// si on n'atteind pas 00:00:00 
	secon0--; 
   if (secon0<0){secon0=59; 
    if (minu0 >0){ minu0--}else{minu0=59; heur0--;} 
    } 
    if (secon0 < 10 ){ secondes0 = '0'+secon0;}else {secondes0 = secon0;} 
    if (minu0 < 10 ) {minutes0 = '0'+minu0;}else {minutes0 = minu0;} 
    if (heur0 < 10 ) {heures0 = '0'+heur0;}else {heures0 = heur0;} 
    document.getElementById('rebours0').innerHTML = heures0+' heures '+minutes0+' minutes '+secondes0+' secondes ' ; 
    if (secon1 != 0 || minu1 != 0 || heur1 != 0){// si on n'atteind pas 00:00:00 
     secon1--; 
     if (secon1<0){secon1=59; 
     if (minu1 >0){ minu1--}else{minu1=59; heur1--;} 
    } 
    if (secon1 < 10 ){ secondes1 = '0'+secon1;}else {secondes1 = secon1;} 
    if (minu1 < 10 ) {minutes1 = '0'+minu1;}else {minutes1 = minu1;} 
    if (heur1 < 10 ) {heures1 = '0'+heur1;}else {heures1 = heur1;} 
    document.getElementById('rebours1').innerHTML = heures1+' heures '+minutes1+' minutes '+secondes1+' secondes ' ; 


	 if (secon2 != 0 || minu2 != 0 || heur2 != 0){// si on n'atteind pas 00:00:00 
   secon2--; 
   if (secon2<0){secon2=59; 
    if (minu2 >0){ minu2--}else{minu2=59; heur2--;} 
    } 
    if (secon2 < 10 ){ secondes2 = '0'+secon2;}else {secondes2 = secon2;} 
    if (minu2 < 10 ) {minutes2 = '0'+minu2;}else {minutes2 = minu2;} 
    if (heur2 < 10 ) {heures2 = '0'+heur2;}else {heures2 = heur2;} 
    document.getElementById('rebours2').innerHTML = heures2+' heures '+minutes2+' minutes '+secondes2+' secondes ' ; 
	

   } 

setTimeout(chrono,1000) //la fonction est relancée tous les secondes 
   } 
  
 
} 


chrono(); 


0
xamurai Messages postés 223 Date d'inscription mardi 11 janvier 2011 Statut Membre Dernière intervention 19 février 2013 15
16 janv. 2011 à 16:34
<html>  
  <head>  
  </head>  
  <body >      
    <span id="rebours0">
    </span>
    <br>
    <span id="rebours1">
    </span> 
    <br>
    <span id="rebours2">
    </span> 
    <br>
    <span id="rebours3">
    </span> 
    <br>
    <span id="rebours4">
    </span> 
    <br>
    <span id="rebours5">
    </span> 
    <br>
    <span id="rebours6">
    </span> 
    <br>
    <span id="rebours7">
    </span> 
    <br>
    <span id="rebours8">
    </span> 
    <br>
    <span id="rebours9">
    </span> 
<script type="text/javascript">

  //  heure * 3600  +  minutes * 60  +  secondes
  secondes0 = 13*3600 + 54*60 + 46;
  secondes1 = 13*3600 + 54*60 + 46;
  secondes2 = 13*3600 + 54*60 + 46;
  secondes3 = 13*3600 + 54*60 + 46;
  secondes4 = 13*3600 + 54*60 + 46;
  secondes5 = 13*3600 + 54*60 + 46;
  secondes6 = 13*3600 + 54*60 + 46;
  secondes7 = 13*3600 + 54*60 + 46;
  secondes8 = 13*3600 + 54*60 + 46;
  secondes9 = 13*3600 + 54*60 + 46;
  
function chrono(totalSecondes, tag){
 if(totalSecondes >0)
 {
  tag.innerHTML = (Math.floor(totalSecondes/3600))+' heures '+(Math.floor( (totalSecondes%3600)/60 ))+' minutes '+(totalSecondes%60)+' secondes ' ; 
    
  --totalSecondes;
  setTimeout(function(){chrono(totalSecondes, tag)},1000);
 }
} 

chrono(secondes0 , document.getElementById("rebours0")); 
chrono(secondes1 , document.getElementById("rebours1")); 
chrono(secondes0 , document.getElementById("rebours2")); 
chrono(secondes1 , document.getElementById("rebours3"));
chrono(secondes0 , document.getElementById("rebours4")); 
chrono(secondes1 , document.getElementById("rebours5"));
chrono(secondes0 , document.getElementById("rebours6")); 
chrono(secondes1 , document.getElementById("rebours7"));
chrono(secondes0 , document.getElementById("rebours8")); 
chrono(secondes1 , document.getElementById("rebours9"));
</script>  
  </body>
</html>
0
xamurai Messages postés 223 Date d'inscription mardi 11 janvier 2011 Statut Membre Dernière intervention 19 février 2013 15
16 janv. 2011 à 15:35
sauf que ce code est plus propre:


 var secon0=46 ;//initialise les secondes 
  var minu0=54; //initialise les minutes 
  var heur0=13; //initialise les heures 
  var secon1=46 ;//initialise les secondes 
  var minu1=54; //initialise les minutes 
  var heur1=13; //initialise les heures 
  
  secondes0 = heur0*3600 + minu0*60 + secon0;
  secondes1 = heur1*3600 + minu1*60 + secon1;
function chrono(totalSecondes, tag){
 if(totalSecondes >0)
 {
  tag.innerHTML = (Math.floor(totalSecondes/3600))+' heures '+(Math.floor( (totalSecondes%3600)/60 ))+' minutes '+(totalSecondes%60)+' secondes ' ; 
    
  --totalSecondes;
  setTimeout(function(){chrono(totalSecondes, tag)},1000);
 }
} 

chrono(secondes0 , document.getElementById("rebours0")); 
chrono(secondes1 , document.getElementById("rebours1")); 
0
chuckichucki
16 janv. 2011 à 16:44
Ca marche nickel, merci infiniment de ton aide !
0
xamurai Messages postés 223 Date d'inscription mardi 11 janvier 2011 Statut Membre Dernière intervention 19 février 2013 15
16 janv. 2011 à 16:58
de rien.
0