Como criar um cronômetro em JavaScript

O cronômetro JavaScript, ou melhor, o temporizador de parada pode ser implementado usando os métodos de tempo JavaScript que são executados em intervalos de tempo.

Os métodos de temporização JavaScript automatizam uma tarefa específica a ser feita em tempo real sem que você precise clicar em um botão ou chamar um evento.

O tempo do JavaScript é composto de dois métodos principais:

• setTimeout( "expressão javascript", milissegundos );
• clearTimeout( ID de setTimeout() );

Ao usar os métodos de tempo do JavaScript, você precisa entender como o JavaScript executa instruções em intervalos de tempo.

O método setTimeout()

Sintaxe:

 setTimeout( "JavaScript Statements", milliseconds );

O método de temporização setTimeout( ) JavaScript usa apenas dois parâmetros:

• primeiro parâmetro: este parâmetro são as instruções JavaScript que você deseja executar. Um nome de função de string também pode ser passado para ela.
• segundo parâmetro: especifica os milissegundos que serão necessários antes de executar as instruções JavaScript no primeiro parâmetro. Ele pode ser simplesmente referido como ( Delay On Execution ).

Exemplo: Estrutura do método setTimeout()

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

Exemplo: Calculando Milissegundos

Para trabalhar com os métodos de sincronização de eventos JavaScript, é muito importante que você entenda como calcular milissegundos.

Você tem um segundo (1s) em mil milissegundos (1000ms)

Fórmulas de milissegundos

 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

Isso significa 300 milissegundos = 0,3 segundos, não até um segundo (1s). Suas instruções JavaScript serão executadas em um intervalo de tempo de 0,3 segundos (0,3s).

Criando um cronômetro

Usando os métodos de evento de temporização do JavaScript, podemos criar nosso cronômetro.

Exemplo: A Estrutura

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

Exemplo: código JavaScript para 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

O método clearTimeout()

Para parar o cronômetro, você precisa chamar o método de evento de tempo clearTimeout() e isso é muito útil.

Tem apenas um parâmetro: o ID de retorno do método setTimeout()

Sintaxe:

 clearTimeout( return ID of setTimeout() );

Nota: O método de temporização setTimeout( ) sempre retorna um valor, e esse valor é passado para o método de evento de temporização clearTimeout( ).

O parâmetro ClearTimeout()

var clearTime = setTimeout( "Declarações JavaScript", 100 );

A variável clearTime é retornada como um valor pelo método de tempo setTimeout( ), que pode ser passado para o clearTimeout( ID ) como um ID para referenciá-lo - clearTimeout( clearTime );

Como funciona

Sempre que o método de temporização clearTimeout( ) é chamado em um método de temporização setTimeout( ) que está ativo, o método de temporização clearTimeout( ) interromperá a execução do método de temporização setTimeout( ), mas sem destruir sua execução inteiramente.

O método de temporização setTimeout( ) fica inativo durante o período em que o método de temporização clearTimeout( ) é chamado e, quando você executa novamente o método de temporização setTimeout( ), ele começará a partir do ponto em que sua execução foi interrompida, não começando novamente do começo.

Assim como quando você pausa um reprodutor de mídia mp3 e depois o reproduz, ele continua tocando da posição anterior, mas não recomeçando desde o início.

Por exemplo, digamos que eu tenha um cronômetro em execução que foi criado usando o método de tempo setTimeout() e seu ponto inicial é 00. Eu executo o cronômetro e agora ele está lendo 41.

Se eu chamar o método de tempo clearTimeout() neste método setTimout() ativo, ele o deixará ocioso durante esse período e sempre que eu executar novamente o método de tempo setTimeout(), ele começará a contar a partir de 41, não de 00 .

Para fazer o cronômetro começar a partir de 00, você deve redefinir seu contador. Essa é a lógica.

Exemplo: Pare o tempo - cronômetro.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

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

O 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>

O cronômetro está completo, e é assim que deve ficar.