Horloge compte à rebours javascript

Les réponses que je vois ici fonctionnent assez bien mais ne sont pas tout à fait rigoureuses. Bien que setInterval () semble être la bonne fonction à utiliser, il souffre d'une légère «dérive» au fil du temps. En outre, si une autre fonction JavaScript prend une seconde ou plus à exécuter, votre horloge à rebours peut être bloquée et afficher le mauvais moment.

Bien que ces occurrences soient peu probables, une plus grande précision n'est vraiment pas plus difficile. Ce que vous voulez, c'est une minuterie qui retire l'horloge de toute inexactitude. Vous devrez calculer le temps libre sur l'horloge système plutôt que sur la fréquence des intervalles de temps, et pour cela, vous devrez renoncer à setInterval () en faveur d'une série d'appels setTimeout (). Le code suivant montre comment.

 function countdown( elementName, minutes, seconds ) { var element, endTime, hours, mins, msLeft, time; function twoDigits( n ) { return (n <= 9 ? "0" + n : n); } function updateTimer() { msLeft = endTime - (+new Date); if ( msLeft < 1000 ) { element.innerHTML = "countdown's over!"; } else { time = new Date( msLeft ); hours = time.getUTCHours(); mins = time.getUTCMinutes(); element.innerHTML = (hours ? hours + ':' + twoDigits( mins ) : mins) + ':' + twoDigits( time.getUTCSeconds() ); setTimeout( updateTimer, time.getUTCMilliseconds() + 500 ); } } element = document.getElementById( elementName ); endTime = (+new Date) + 1000 * (60*minutes + seconds) + 500; updateTimer(); } 

Essayez-le: http://jsfiddle.net/mrwilk/qVuHW

Si votre horloge devrait, par hasard, s'aligner très étroitement aux secondes de l'horloge système, votre compte à rebours peut apparaître comme "manque de battements" en raison de la réception d'événements temporaires juste avant ou juste après un intervalle d'une seconde. La solution consiste à aligner vos événements sur la demi-seconde; C'est-à-dire à mi-chemin entre les battements des secondes de l'horloge système. Que ce que font les 500 dans le code, où 500ms = ½ sec.

La seule autre question à noter est que le code ici affiche des heures ainsi que des minutes et des secondes; C'est-à-dire HH: MM: SS. L'informatique des heures, des minutes et des secondes à partir de millisecondes n'est pas difficile mais est un peu gênante, et il est plus simple de laisser l'objet Date ce faire pour vous.

J'ai nettoyé le code ci-dessus et l'ai formé comme votre exemple. Il a également supprimé les variables globales et vous permet de créer plusieurs temporisateurs.

Il y a un lien en direct ici http://jsfiddle.net/Apnu2/6/

 countdown('countdown', 1, 5); function countdown(element, minutes, seconds) { // set time for the particular countdown var time = minutes*60 + seconds; var interval = setInterval(function() { var el = document.getElementById(element); // if the time is 0 then end the counter if(time == 0) { el.innerHTML = "countdown's over!"; clearInterval(interval); return; } var minutes = Math.floor( time / 60 ); if (minutes < 10) minutes = "0" + minutes; var seconds = time % 60; if (seconds < 10) seconds = "0" + seconds; var text = minutes + ':' + seconds; el.innerHTML = text; time--; }, 1000); } 

L' element du script est l'identifiant de la balise que vous passez à la fonction.
Ainsi, le countdown('div1') affichera une minuterie dans une balise avec id = "div1"

Cependant, votre minuteur particulier n'autorise pas plusieurs instances et utilise un intervalle var global appelé.

Générer le JSON sur le serveur et le reste prend soin d'eux-mêmes

ICI est une version OO qui est plus précise car elle ne fait que calculer l'heure de fin au lieu de dépendre de l'intervalle qui bloquera si le navigateur est occupé: http://jsbin.com/ujuzo5/edit

Et voici ma solution originale avec l'aide des bonnes personnes à SO ici: fermeture brisée – aidez-moi à la réparer

 <script type="text/javascript"> // generate this on the server and note there is no comma after the last item var counters = { "shoes":{"id":"shoe1","minutes":1,"seconds":5}, "trousers":{"id":"trouser1","minutes":10,"seconds":0} }; var intervals = {}; window.onload = function() { for (var el in counters) { countdown(counters[el]) }; } function countdown(element) { var minutes = element.minutes; var seconds = element.seconds; intervals[element.id] = setInterval(function() { var el = document.getElementById(element.id); if(seconds == 0) { if(minutes == 0) { el.innerHTML = "countdown's over!"; clearInterval(intervals[element.id]); return; } else { minutes--; seconds = 60; } } if(minutes > 0) { var minute_text = minutes + (minutes > 1 ? ' minutes' : ' minute'); } else { var minute_text = ''; } var second_text = seconds > 1 ? 'seconds' : 'second'; el.innerHTML = minute_text + ' ' + seconds + ' ' + second_text + ' remaining'; seconds--; // optionally update the member values element.minutes=minutes; element.seconds=seconds; }, 1000); } </script> shoes: <span id="shoe1"></span><br /> trousers: <span id="trouser1"></span><br /> 

  <script> var s=3600; var h=Math.floor(s/3600); var m=Math.floor((s%3600)/60); var sec=(s%60); window.clearInterval(x); function clock() { if(m!=0) if(sec==0){ m=m-1; sec=59;} if(h!=0) if(m==0){ h=h-1;m=59; sec=59;} if((m==0&&h==0&&sec==0)) $(this).stop(); --sec; var hr=(h<10? "0":"")+h; var minu=(m<10? "0":"")+m; var second=(sec<10? "0":"")+sec; document.getElementById("time").innerHTML=hr+":"+ minu +":"+second ; } var x=window.setInterval(clock,10); </script>