Partage
  • Partager sur Facebook
  • Partager sur Twitter

Décompte en JavaScript avec jquery

Sujet résolu
28 août 2016 à 17:23:05

Bonjour tout le monde , j'ai fait un script en jquery pour faire un décompte de 30 minute  format heure:minute:dixième de seconde , voici le code source .

var min=30,sec=0,ds=0;	
	
var chrono=setInterval(function(){
	
        
	if(min==0){ // On stop tout si minute=0
		
	   clearInterval(chrono);
		
	}
	
      
	if(sec==0){ // si les seconde = 0
	  
	  min--;   // on enlève 1 minute
	  sec=59; // on remet les seconde a 59 
	  
       }
	
	 
	if(ds==0){ // si les dixièmes de seconde=0

	  sec--; // on enlève 1 seconde 
	  ds=10; // on remet les dixième a 10
	  	
        }else{

            ds--;  // sinon on enlève 1 dixième 

	 }
	
$('.timer').text(min+':'+sec+':'+ds); // Affiche le décompte

	
},100);	// mise a jour toute les 100 milliseconde (1s=1000 milliseconde)



Je met un chrono de 30 minute a coté est les deux tombe pas juste quelqu'un peux voir si mon code est correcte , Merci beaucoup ! :p

-
Edité par Leugeritecte 30 août 2016 à 16:22:24

  • Partager sur Facebook
  • Partager sur Twitter
Qu’est-ce que le Réel ?
28 août 2016 à 18:56:32

Écrire ds et non ms à la ligne 32.

Ensuite, l'écriture des dixièmes de seconde est apparemment trop lente pour respecter le setInterval de 100 ms

Cela fonctionne avec les secondes...

-
Edité par 007julien 28 août 2016 à 18:56:43

  • Partager sur Facebook
  • Partager sur Twitter
30 août 2016 à 16:25:17

Merci de ta réponse 

007julien a écrit:

Ensuite, l'écriture des dixièmes de seconde est apparemment trop lente pour respecter le setInterval de 100 ms

Cela fonctionne avec les secondes...

Je n'ai pas compris cette phare peux tu être plus explicite ,merci :D

  • Partager sur Facebook
  • Partager sur Twitter
Qu’est-ce que le Réel ?
30 août 2016 à 20:06:22

Il faudrait s'assurer que le temps mis par la fonction pour mettre à jour le nouveau temps et l'écrire est inférieur au 10ème de seconde.

Mais le code est incorrect car il retranche deux fois une seconde dès le premier pas !

Plutôt que de s'enquiquiner à suivre plusieurs compteurs, il suffit de décrémenter le temps total en dixièmes de secondes

var p = document.getElementById('myP');
var min=30,sec=0,dse=0;
var tmp=(min*60+sec)*10+dse;

var chrono=setInterval(function (){
	 min=Math.floor(tmp/600);
	 sec=Math.floor((tmp-min*600)/10);
	 dse=tmp-((min*60)+sec)*10;
	 p.innerHTML=min+':'+sec+':'+dse;
	 tmp--;
},100);



-
Edité par 007julien 30 août 2016 à 20:06:35

  • Partager sur Facebook
  • Partager sur Twitter
31 août 2016 à 8:57:57

Salut,

Effectivement, le code de 007julien n'est pas décalé en comparant avec un vrai chronomètre (tu peux le tester en live ici : http://codepen.io/Deejayfool/pen/ORLkEj )

En revanche, un problème qui survient est que si tu changes d'onglet ou que tu réduis le navigateur, le compte à rebours se met en pause... A voir si ça peut poser problème dans ton cas.

  • Partager sur Facebook
  • Partager sur Twitter
2 septembre 2016 à 20:34:13

merci beaucoup sa marche super bien !
  • Partager sur Facebook
  • Partager sur Twitter
Qu’est-ce que le Réel ?
19 juin 2017 à 23:38:01

PLUS EN DÉTAILLE MERCI !

                            var min=30  // Minute
                               ,sec=0   // Seconde
                               ,dse=0;  // dixième de secondes
                    
                           // On convertie le temp total en dixième de seconde 
                           // ex: { 30 minute } 30 minute*60s=1800s * 10 / 1s -> 10 dixièeme de seconde  
                        
                           var tmp=(min*60+sec)*10+dse;

                          // On crée une intervalle qui décrémente 1 dixieme de seconde a chaque boucle du temp total
                        
                          var chrono=setInterval(function(){
                                
                              
                                 // (1) On calcule le nombre minute a affiché  60s -> 1 min  600ds -> 1 min 
                                 // combien ? de paquet de 600 peux on faire avec 18 000 ds car 1 paquet représente 1minute
                                 // .floor pour récupéré unique l'entier car apres la virgule c'est des ds convertie en minute 
                              
                                 min=Math.floor(tmp/600); // -> minute
                                 
                                 // (2) On enleve le nombre de minute déja utilise par les minute (min*600) au temp total le reste des milliseconde restant , on le transforme en seconde 1s -> 10 ds  ( cb de paquet de 10 peux on faire ? )
                               
                                 sec=Math.floor( (tmp-min*600) / 10 ); // -> seconde
                              
                                 // (3) On recupere le nombre de milliseconde restante 
                                 // dixieme de seconde = temp total - ( seconde * 10 ) / 1s -> 10 dixieme de seconde
                              
                                 dse = tmp - ((min*60)+sec)*10; // -> Dixieme de milliseconde
                                 
                                 $('.magical-timer').text(min+':'+sec+':'+dse) ; // Affiche les minute : seconde : dixieme de seconde
                                 console.log(min+':'+sec+':'+dse+'   '+tmp) ; 
                              
                                 tmp--; // On enlève 1 dixième de seconde 
                                
                              
                              
                              
                            },100); /* 100ms -> 1 dixieme de seconde / 1000ms -> 1s */   

        



-
Edité par Leugeritecte 19 juin 2017 à 23:38:17

  • Partager sur Facebook
  • Partager sur Twitter
Qu’est-ce que le Réel ?