Sujet Précédent Sujet Suivant

Compte à rebours secondes ne se réinitialise pas

Résolu/Fermé
nocram18 Messages postés 471 Date d'inscription vendredi 26 avril 2013 Statut Membre Dernière intervention 16 juillet 2017 - 18 juin 2017 à 17:56
nocram18 Messages postés 471 Date d'inscription vendredi 26 avril 2013 Statut Membre Dernière intervention 16 juillet 2017 - 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.
A voir également:

3 réponses

Réponse 1 / 3
jordane45 Messages postés 38143 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 21 avril 2024 4 649
18 juin 2017 à 22:27
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>

1
nocram18 Messages postés 471 Date d'inscription vendredi 26 avril 2013 Statut Membre Dernière intervention 16 juillet 2017 25
Modifié le 19 juin 2017 à 18:46
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 ?
0
jordane45 Messages postés 38143 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 21 avril 2024 4 649 > nocram18 Messages postés 471 Date d'inscription vendredi 26 avril 2013 Statut Membre Dernière intervention 16 juillet 2017
19 juin 2017 à 19:17
https://codes-sources.commentcamarche.net/faq/10686-le-nouveau-codes-sources-comment-ca-marche#balises-code
0
nocram18 Messages postés 471 Date d'inscription vendredi 26 avril 2013 Statut Membre Dernière intervention 16 juillet 2017 25
19 juin 2017 à 19:19
Merci ;)
0
Réponse 2 / 3
thehitappli Messages postés 6 Date d'inscription dimanche 18 juin 2017 Statut Membre Dernière intervention 23 juin 2017 2
18 juin 2017 à 20:05
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.
0
nocram18 Messages postés 471 Date d'inscription vendredi 26 avril 2013 Statut Membre Dernière intervention 16 juillet 2017 25
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.
0
Réponse 3 / 3
thehitappli Messages postés 6 Date d'inscription dimanche 18 juin 2017 Statut Membre Dernière intervention 23 juin 2017 2
Modifié le 18 juin 2017 à 22:05
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.
0
nocram18 Messages postés 471 Date d'inscription vendredi 26 avril 2013 Statut Membre Dernière intervention 16 juillet 2017 25
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
0