Comment créer un chronomètre en JavaScript

Le chronomètre JavaScript ou plutôt le minuteur d'arrêt peuvent être implémentés à l'aide des méthodes de synchronisation JavaScript qui sont exécutées à des intervalles de temps.

Les méthodes de synchronisation JavaScript automatisent une tâche particulière à effectuer à la volée sans que vous ayez à cliquer sur un bouton ou à appeler un événement.

Le minutage JavaScript est composé de deux méthodes clés :

• setTimeout( "expression javascript", millisecondes );
• clearTimeout( ID de setTimeout( ) );

Lorsque vous utilisez les méthodes de minutage JavaScript, vous devez comprendre comment JavaScript exécute les instructions à des intervalles de temps.

La méthode setTimeout( )

Syntaxe:

 setTimeout( "JavaScript Statements", milliseconds );

La méthode de minutage JavaScript setTimeout( ) ne prend que deux paramètres :

• premier paramètre : ce paramètre correspond aux instructions JavaScript que vous souhaitez exécuter. Un nom de fonction de chaîne peut également lui être passé.
• deuxième paramètre : spécifie les millisecondes qu'il faudra avant d'exécuter les instructions JavaScript dans le premier paramètre. Il peut simplement être appelé (Délai d'exécution).

Exemple : Structure de la méthode setTimeout( )

 var setTime = setTimeout( function ( ) { // javascript statements }, 500 ); Or var setTime = setTimeout( "setTimeFunction( )", 500 );

Exemple : Calcul des millisecondes

Pour travailler avec les méthodes de chronométrage des événements JavaScript, il est très important que vous compreniez comment calculer les millisecondes.

Vous avez une seconde (1s) sur mille millisecondes (1000ms)

Formules millisecondes

 1000ms = 1s Yms = Xs if 1000ms = 1s 300ms = Xs #cross multiplying 1000ms * Xs = 300ms * 1s X * 1000 = 300 * 1 1000X = 300 X = 300 / 1000 X = 0.3s

Cela signifie 300 millisecondes = 0,3 seconde, pas jusqu'à une seconde (1s). Vos instructions JavaScript seront exécutées dans un intervalle de temps de 0,3 seconde (0,3 s).

Création d'un chronomètre

En utilisant les méthodes d'événement de synchronisation JavaScript, nous pouvons créer notre chronomètre.

Exemple : la structure

 var clear; function stopWatch( ) { // javascript statement here clear = setTimeout( "stopWatch( )", 1000 ); } Or function stopWatch( ) { // javascript statement here clear = setTimeout( function ( ) { // javascript statement here }, 1000 ); } Or var stopWatch = function ( ) { // javascript statement here clear = setTimeout( "stopWatch( )", 1000 ); }

Exemple : code JavaScript pour startwatch.js

 // initialize your variables outside the function var count = 0; var clearTime; var seconds = 0, minutes = 0, hours = 0; var clearState; var secs, mins, gethours ; function startWatch( ) { /* check if seconds is equal to 60 and add a +1 to minutes, and set seconds to 0 */ if ( seconds === 60 ) { seconds = 0; minutes = minutes + 1; } /* you use the javascript tenary operator to format how the minutes should look and add 0 to minutes if less than 10 */ mins = ( minutes < 10 ) ? ( '0' + minutes + ': ' ) : ( minutes + ': ' ); /* check if minutes is equal to 60 and add a +1 to hours set minutes to 0 */ if ( minutes === 60 ) { minutes = 0; hours = hours + 1; } /* you use the javascript tenary operator to format how the hours should look and add 0 to hours if less than 10 */ gethours = ( hours < 10 ) ? ( '0' + hours + ': ' ) : ( hours + ': ' ); secs = ( seconds < 10 ) ? ( '0' + seconds ) : ( seconds ); // display the stopwatch var x = document .getElementById("timer"); x.innerHTML = 'Time: ' + gethours + mins + secs; /* call the seconds counter after displaying the stop watch and increment seconds by +1 to keep it counting */ seconds++; /* call the setTimeout( ) to keep the stop watch alive ! */ clearTime = setTimeout( "startWatch( )", 1000 ); } // startWatch( ) //create a function to start the stop watch function startTime( ) { /* check if seconds, minutes, and hours are equal to zero and start the stop watch */ if ( seconds === 0 && minutes === 0 && hours === 0 ) { /* hide the fulltime when the stop watch is running */ var fulltime = document.getElementById( "fulltime" ); fulltime.style.display = "none"; /* hide the start button if the stop watch is running */ this.style.display = "none"; /* call the startWatch( ) function to execute the stop watch whenever the startTime( ) is triggered */ startWatch( ); } // if () } // startTime() /* you need to bind the startTime( ) function to any event type to keep the stop watch alive ! */ window.addEventListener( 'load', function ( ) { var start = document .getElementById("start"); start.addEventListener( 'click', startTime ); }); // startwatch.js end

La méthode clearTimeout()

Pour arrêter le minuteur, vous devez appeler la méthode d'événement de minutage clearTimeout() et cela est très pratique.

Elle n'a qu'un seul paramètre : l'identifiant de retour de la méthode setTimeout()

Syntaxe:

 clearTimeout( return ID of setTimeout() );

Remarque : La méthode de minutage setTimeout( ) renvoie toujours une valeur, et cette valeur est transmise à la méthode d'événement de minutage clearTimeout( ).

Le paramètre ClearTimeout( )

var clearTime = setTimeout( "Instructions JavaScript", 100 );

La variable clearTime est renvoyée sous forme de valeur par la méthode de minutage setTimeout( ), qui peut être transmise à clearTimeout( ID ) en tant qu'ID pour la référencer - clearTimeout( clearTime );

Comment ça fonctionne

Chaque fois que la méthode de minutage clearTimeout( ) est appelée sur une méthode de minutage setTimeout( ) qui est active, la méthode de minutage clearTimeout( ) arrêtera l'exécution de la méthode de minutage setTimeout( ) mais sans détruire entièrement son exécution.

La méthode de minutage setTimeout( ) est laissée inactive pendant la période pendant laquelle la méthode de minutage clearTimeout( ) est appelée, et lorsque vous réexécutez la méthode de minutage setTimeout( ), elle démarrera à partir du point où son exécution a été arrêtée, sans recommencer depuis le début Depuis le début.

Tout comme lorsque vous mettez en pause un lecteur multimédia mp3, puis que vous le lisez, il continue de jouer à partir de la position précédente, mais ne recommence pas depuis le début.

Par exemple, disons que j'ai une minuterie en cours d'exécution créée à l'aide de la méthode de minutage setTimeout() et que son point de départ est 00. J'exécute la minuterie et elle affiche maintenant 41.

Si j'appelle la méthode de minutage clearTimeout() sur cette méthode setTimout() active, elle la rendra inactive pendant cette période, et chaque fois que je ré-exécuterai la méthode de minutage setTimeout(), elle commencera à compter à partir de 41, pas de 00 .

Pour faire démarrer la minuterie à partir de 00, vous devez réinitialiser son compteur. C'est la logique.

Exemple : Arrêter le temps - stopwatch.js

 //create a function to stop the time function stopTime( ) { /* check if seconds, minutes and hours are not equal to 0 */ if ( seconds !== 0 || minutes !== 0 || hours !== 0 ) { /* display the full time before reseting the stop watch */ var fulltime = document .getElementById( "fulltime" ); //display the full time fulltime.style.display = "block"; var time = gethours + mins + secs; fulltime.innerHTML = 'Fulltime: ' + time; // reset the stop watch seconds = 0; minutes = 0; hours = 0; secs = '0' + seconds; mins = '0' + minutes + ': '; gethours = '0' + hours + ': '; /* display the stopwatch after it's been stopped */ var x = document.getElementById ("timer"); var stopTime = gethours + mins + secs; x.innerHTML = stopTime; /* display all stop watch control buttons */ var showStart = document.getElementById ('start'); showStart.style.display = "inline-block"; var showStop = document.getElementById ("stop"); showStop.style.display = "inline-block"; /* clear the stop watch using the setTimeout( ) return value 'clearTime' as ID */ clearTimeout( clearTime ); } // if () } // stopTime() /* you need to call the stopTime( ) function to terminate the stop watch */ window.addEventListener( 'load', function ( ) { var stop = document.getElementById ("stop"); stop.addEventListener( 'click', stopTime ); }); // stopwatch.js end

Le CSS

 #stopWatch { width: 280px; height: auto; text-align: center; display: block; padding: 5px; margin: 0 auto; } #timer, #fulltime { width: auto; height: auto; padding: 10px; font-weight: bold; font-family: tahoma; display: block; border: 1px solid #eee; text-align: center; box-shadow: 0 0 5px #ccc; background: #fbfbf0; color: darkblue; border-bottom:4px solid darkgrey; } button { cursor: pointer; font-weight: 700; } #fulltime { display:none; font-size:16px; font-weight:bold; }

Le HTML

 <!DOCTYPE html> <html lang="en"> <head> <title> JavaScript Stop Watch </title> <style text="text/css"> </style> <script type="text/javascript"> </script> </head> <body> <section> <p> Time : 00:00:00 </p> <button> Start </button> <button> Stop </button> <p> </p> </section> </body> </html>

Le chronomètre est terminé, et voici à quoi il devrait ressembler.