Compte à rebours secondes ne se réinitialise pas [Résolu]

nocram18 469 Messages postés vendredi 26 avril 2013Date d'inscription 16 juillet 2017 Dernière intervention - 18 juin 2017 à 17:56 - Dernière réponse : nocram18 469 Messages postés vendredi 26 avril 2013Date d'inscription 16 juillet 2017 Dernière intervention
- 19 juin 2017 à 19:19
Bonjour,

Après pas mal de recherche je viens vers vous.

J'ai un compte à rebours qui affiche les minutes et les secondes en décrémentant.

Mon soucis est que lorsque les secondes se finissent je n'arrive pas à les réinitialiser et recommencer ma fonction "secondes" avec une boucle.

Dans l'idée est lorsque le compteur des secondes arrivent à zéro il recommencer à partir de 59 secondes, et cela X fois.

Les minutes elles se décrémentent toutes seules sans soucis car le compteur n'a pas besoin de refaire une boucle pour recommencer.

Les commandes setInverval et setTimeOut avec toutes les options possibles ne fonctionnent pas forcément.

Ici je vous joint seulement le code pour les secondes ou j'ai le problème.

<div class="article0_2_2 floatdroi block1">
				
			<script type="text/javascript">
		
					var cpt = 5 ;
				var x ;
 
				function secondes()
				{
					if(cpt>=0)
					{
						if(cpt>1)
						{
							var sec = " secondes.";
						} else {
							var sec = " seconde.";
						}
						document.getElementById("chrono_secondes").innerHTML = "et " + cpt + sec ;
						cpt-- ;
						x = setTimeout("secondes()",1000) ;
					}
					else
					{
					clearTimeout(x) ;
					}
				}
			</script>
				<h2>
				<body onload="minutes(); secondes();">
				<div id="chrono_secondes"></div>
				</h2>
		
		</div>



P-S : Désolé mais je ne connais pas spécialement le JS, je bidouille.

En vous remerciant d'avance, bonne journée.
Afficher la suite 

8 réponses

Répondre au sujet
jordane45 19316 Messages postés mercredi 22 octobre 2003Date d'inscriptionModérateurStatut 17 décembre 2017 Dernière intervention - 18 juin 2017 à 22:27
+1
Utile
3
Bonjour,

Ton code se résume par ces quelques lignes :
<div class="article0_2_2 floatdroi block1">
	<h2>
		<div id="chrono_secondes"></div>
	</h2>
		
</div>

<script type="text/javascript">

		
var cpt = 5 ;
var x ;

function secondes(){
 var sec =  cpt>1 ? " secondes." : " seconde.";
 document.getElementById("chrono_secondes").innerHTML = "et " + cpt + sec ;
 
 cpt = (cpt == 0) ? 60 : cpt;
 cpt--;
 x = setTimeout("secondes()",1000) ;
}

secondes();
</script>


NB: Si tu fais un crhono dans lequel tu veux gérer les minutes et les secondes.... il suffit d'une Seule fonction (travaillant en secondes et tu n'auras que des "divisions" à faire...

<div class="article0_2_2 floatdroi block1">
	<h2>
    <div id="chrono_minutes"></div>
		<div id="chrono_secondes"></div>
	</h2>
		
</div>

<script type="text/javascript">

		
var cpt = 70 ; // en secondes
var x ;

function chrono(){

 var min =  Math.floor(cpt/60);
 var sec =  cpt - min*60;
 var strMin =  min>1 ? " minutes." : " minute.";
 var strSec =  sec>1 ? " secondes." : " seconde.";
 
 document.getElementById("chrono_minutes").innerHTML = min + strMin;
 document.getElementById("chrono_secondes").innerHTML = "et " + sec + strSec ;

 cpt--;
 x = setTimeout("chrono()",1000) ;
}

chrono();
</script>

Cette réponse vous a-t-elle aidé ?  
nocram18 469 Messages postés vendredi 26 avril 2013Date d'inscription 16 juillet 2017 Dernière intervention - 19 juin 2017 à 18:44
Salut jordane45,

Merci de ta réponse. Ton script fonctionne niquel, il est simple et efficace.

Voici le script avec l'ajout de phrase pour ceux qui ne trouverai pas :


<div class="article0_2_2 floatdroi block1">

<h2><div id="chrono_secondes"></div></h2>
<script type="text/javascript">


var cpt = 125 ; // en secondes
var x ;

function chrono(){

var min = Math.floor(cpt/60);
var sec = cpt - min*60;
var strMin = min>1 ? " minutes" : " minute";
var strSec = sec>1 ? " secondes." : " seconde.";

document.getElementById("chrono_minutes").innerHTML = "La page se fermera dans " + min + strMin;
document.getElementById("chrono_secondes").innerHTML = "et " + sec + strSec ;

cpt--;
x = setTimeout("chrono()",1000) ;
}

chrono();
</script>
</div>


Je mets le sujet en résolu, pas facile le JS, je me suis quand même pas mal creusé les méninges dessus, mais c'est cool, même si à la fin on a le cerveau qui chauffe.

Merci à tous, bonne journée à la prochaine :D

Je mets un +1 merci :D

EDIT pour jordane45 : Tu as fais comment pour rajouter les chiffres à côtés des lignes, tu as choisis quels langages ?
jordane45 19316 Messages postés mercredi 22 octobre 2003Date d'inscriptionModérateurStatut 17 décembre 2017 Dernière intervention > nocram18 469 Messages postés vendredi 26 avril 2013Date d'inscription 16 juillet 2017 Dernière intervention - 19 juin 2017 à 19:17
nocram18 469 Messages postés vendredi 26 avril 2013Date d'inscription 16 juillet 2017 Dernière intervention - 19 juin 2017 à 19:19
Merci ;)
Commenter la réponse de jordane45
thehitappli 6 Messages postés dimanche 18 juin 2017Date d'inscription 23 juin 2017 Dernière intervention - 18 juin 2017 à 20:05
0
Utile
1
Bonjour,
Ton erreur vient du fait que quand les secondes arrivent en dessous de 0 et que
clearTimeout(x) ;
ne réinitialisent pas le comptes des secondes mais réinitialisent seulement le compte de la seconde actuelle.

Essaye ça :

<div class="article0_2_2 floatdroi block1">

<script type="text/javascript">

var cpt = 5 ;
var x ;

function secondes()
{
if(cpt>=0)
{
if(cpt>1)
{
var sec = " secondes.";
} else {
var sec = " seconde.";
}
document.getElementById("chrono_secondes").innerHTML = "et " + cpt + sec ;
cpt-- ;
x = setTimeout("secondes()",1000) ;
}
else
{
cpt = 59;
document.getElementById("chrono_secondes").innerHTML = "et " + cpt + sec ;
cpt-- ;
x = setTimeout("secondes()",1000) ;
}
}
</script>
<h2>
<body onload="minutes(); secondes();">
<div id="chrono_secondes"></div>
</h2>

</div>


Oublie pas
document.getElementById("chrono_secondes").innerHTML = "et " + cpt + sec ;
cpt-- ;
x = setTimeout("secondes()",1000) ;
après
cpt = 59;
car sinon ton chrono ne va pas affiché la seconde 59.
nocram18 469 Messages postés vendredi 26 avril 2013Date d'inscription 16 juillet 2017 Dernière intervention - 18 juin 2017 à 20:51
Salut thehitappli,

Niquel ca fonctionne, j'ai juste un petit décalage entre les minutes et les secondes mais faut que je règle ça dans les millisecondes, je pense.

Il y a un ptit bug c'est lorsqu"il recommence à 59, il affiche "59 Undefined" au lieu de "59 secondes" mais rien de grave ^^. C'est pour infos.

Bon j'ai cherché pendant toute la journée et il fallait juste que je recopie une des éléments du dessus, je suis dégouté.
Merci à toi.

Si tu as une idée pour l'undefined dit moi.

Je mettrai en résolu dans la semaine si pas de réponse.

Bonne soirée à tout le monde.
Commenter la réponse de thehitappli
thehitappli 6 Messages postés dimanche 18 juin 2017Date d'inscription 23 juin 2017 Dernière intervention - Modifié par jordane45 le 18/06/2017 à 22:05
0
Utile
1
Pour le undefined je crois qu'il faut que tu mettes
var sec = " secondes.";
après
cpt = 59;


Ça donnerait :
<div class="article0_2_2 floatdroi block1">
    
   <script type="text/javascript">
  
     var cpt = 5 ;
    var x ;
 
    function secondes()
    {
     if(cpt>=0)
     {
      if(cpt>1)
      {
       var sec = " secondes.";
      } else {
       var sec = " seconde.";
      }
      document.getElementById("chrono_secondes").innerHTML = "et " + cpt + sec ;
      cpt-- ;
      x = setTimeout("secondes()",1000) ;
     }
     else
     {
     cpt = 59;
                                        var sec = " secondes.";
                                     document.getElementById("chrono_secondes").innerHTML = "et " + cpt + sec ;
      cpt-- ;
      x = setTimeout("secondes()",1000) ;
     }
    }
   </script>
    <h2>
    <body onload="minutes(); secondes();">
    <div id="chrono_secondes"></div>
    </h2>
  
  </div>

Bonne soirée.
nocram18 469 Messages postés vendredi 26 avril 2013Date d'inscription 16 juillet 2017 Dernière intervention - 19 juin 2017 à 18:46
Merci à toi thehitappli

J'ai opté pour la solution de jordane45, plus simple pour moi que celle que j'avais commencée.

Bonne journée ++

Je mets un +1 merci :D
Commenter la réponse de thehitappli