Come creare un cronometro in JavaScript

Il cronometro JavaScript o meglio il timer di arresto può essere implementato utilizzando i metodi di temporizzazione JavaScript che vengono eseguiti a intervalli di tempo.

I metodi di temporizzazione JavaScript automatizzano una particolare attività da eseguire al volo senza che tu debba fare clic su un pulsante o chiamare un evento.

Il timing di JavaScript è composto da due metodi chiave:

• setTimeout("espressione javascript", millisecondi);
• clearTimeout( ID di setTimeout() );

Quando si utilizzano i metodi di temporizzazione JavaScript, è necessario comprendere come JavaScript esegue le istruzioni in intervalli di tempo.

Il metodo setTimeout()

Sintassi:

 setTimeout( "JavaScript Statements", milliseconds );

Il metodo di temporizzazione JavaScript setTimeout() accetta solo due parametri:

• primo parametro: questo parametro è l'istruzione JavaScript che si desidera eseguire. È anche possibile passargli un nome di funzione stringa.
• secondo parametro: specifica i millisecondi necessari prima di eseguire le istruzioni JavaScript nel primo parametro. Può essere semplicemente indicato come ( Delay On Execution ).

Esempio: struttura del metodo setTimeout()

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

Esempio: calcolo dei millisecondi

Per lavorare con i metodi di temporizzazione degli eventi JavaScript, è molto importante capire come calcolare i millisecondi.

Hai un secondo ( 1 s ) in mille millisecondi ( 1000 ms )

Formule di millisecondi

 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

Ciò significa 300 millisecondi = 0,3 secondi, non fino a un secondo (1 s). Le tue istruzioni JavaScript verranno eseguite in un intervallo di tempo di 0,3 secondi (0,3 secondi).

Creazione di un cronometro

Utilizzando i metodi degli eventi di temporizzazione JavaScript, possiamo creare il nostro cronometro.

Esempio: la struttura

 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 ); }

Esempio: codice JavaScript per 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

Il metodo clearTimeout()

Per fermare il timer, devi chiamare il metodo dell'evento di temporizzazione clearTimeout() e questo è molto utile.

Ha un solo parametro: l'ID di ritorno del metodo setTimeout()

Sintassi:

 clearTimeout( return ID of setTimeout() );

Nota: il metodo di temporizzazione setTimeout() restituisce sempre un valore e tale valore viene passato al metodo dell'evento di temporizzazione clearTimeout().

Il parametro ClearTimeout()

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

La variabile clearTime viene restituita come valore dal metodo di temporizzazione setTimeout(), che può essere passato a clearTimeout( ID ) come ID per farvi riferimento - clearTimeout( clearTime );

Come funziona

Ogni volta che il metodo di temporizzazione clearTimeout() viene chiamato su un metodo di temporizzazione setTimeout() attivo, il metodo di temporizzazione clearTimeout() interromperà l'esecuzione del metodo di temporizzazione setTimeout() ma senza distruggerne completamente l'esecuzione.

Il metodo di temporizzazione setTimeout() viene lasciato inattivo durante il periodo in cui viene chiamato il metodo di temporizzazione clearTimeout() e quando riesegui il metodo di temporizzazione setTimeout(), inizierà dal punto in cui la sua esecuzione è stata interrotta, non ricominciare da capo dall'inizio.

Proprio come quando metti in pausa un lettore multimediale mp3 e poi lo riproduci, la riproduzione continua dalla posizione precedente, ma non ricomincia dall'inizio.

Ad esempio, supponiamo di avere un timer in esecuzione che è stato creato utilizzando il metodo di temporizzazione setTimeout() e il suo punto iniziale è 00. Eseguo il timer e ora legge 41.

Se chiamo il metodo di temporizzazione clearTimeout() su questo metodo attivo setTimout(), lo renderà inattivo durante quel periodo e ogni volta che rieseguo il metodo di temporizzazione setTimeout(), inizierà a contare da 41, non da 00 .

Per far partire il timer da 00, devi azzerare il suo contatore. Questa è la logica.

Esempio: Stop The Time - 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

Il 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; }

L'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>

Il cronometro è completato ed è così che dovrebbe apparire.