Cómo crear un cronómetro en JavaScript

El cronómetro de JavaScript o, más bien, el temporizador de parada se puede implementar utilizando los métodos de tiempo de JavaScript que se ejecutan en intervalos de tiempo.

Los métodos de tiempo de JavaScript automatizan una tarea en particular para que se realice sobre la marcha sin tener que hacer clic en un botón o llamar a un evento.

El tiempo de JavaScript se compone de dos métodos clave:

• setTimeout( "expresión javascript", milisegundos);
• clearTimeout( ID de setTimeout( ) );

Al utilizar los métodos de temporización de JavaScript, debe comprender cómo JavaScript ejecuta las declaraciones en intervalos de tiempo.

El método setTimeout()

Sintaxis:

 setTimeout( "JavaScript Statements", milliseconds );

El método de temporización de JavaScript setTimeout( ) toma solo dos parámetros:

• primer parámetro: este parámetro son las declaraciones de JavaScript que desea ejecutar. También se le puede pasar un nombre de función de cadena.
• segundo parámetro: especifica los milisegundos que tomará antes de ejecutar las declaraciones de JavaScript en el primer parámetro. Simplemente puede denominarse (Retraso en la ejecución).

Ejemplo: estructura del método setTimeout()

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

Ejemplo: cálculo de milisegundos

Para trabajar con los métodos de temporización de eventos de JavaScript, es muy importante que comprenda cómo calcular los milisegundos.

Tienes un segundo (1s) en mil milisegundos (1000ms)

Fórmulas de milisegundos

 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

Esto significa 300 milisegundos = 0,3 segundos, no hasta un segundo (1s). Sus declaraciones de JavaScript se ejecutarán en un intervalo de tiempo de 0,3 segundos (0,3 s).

Crear un cronómetro

Usando los métodos de eventos de tiempo de JavaScript, podemos crear nuestro cronómetro.

Ejemplo: la estructura

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

Ejemplo: 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

El método clearTimeout()

Para detener el temporizador, debe llamar al método de evento de tiempo clearTimeout() y esto es muy útil.

Solo tiene un parámetro: el ID de retorno del método setTimeout()

Sintaxis:

 clearTimeout( return ID of setTimeout() );

Nota: El método de temporización setTimeout( ) siempre devuelve un valor, y ese valor se pasa al método de eventos de temporización clearTimeout( ).

El parámetro ClearTimeout( )

var clearTime = setTimeout( "Declaraciones de JavaScript", 100);

La variable clearTime es devuelta como un valor por el método de temporización setTimeout( ), que se puede pasar a clearTimeout( ID ) como una ID para hacer referencia a ella - clearTimeout( clearTime );

Cómo funciona

Cada vez que se llama al método de temporización clearTimeout() en un método de temporización setTimeout() que está activo, el método de temporización clearTimeout() detendrá la ejecución del método de temporización setTimeout() pero sin destruir su ejecución por completo.

El método de temporización setTimeout( ) se deja inactivo durante el período en que se llama al método de temporización clearTimeout( ), y cuando vuelva a ejecutar el método de temporización setTimeout( ), comenzará desde el punto en que se detuvo su ejecución, no desde el principio. desde el principio.

Al igual que cuando pausa un reproductor de medios mp3 y luego lo reproduce, continúa reproduciéndose desde la posición anterior, pero no comienza desde el principio.

Por ejemplo, supongamos que tengo un temporizador en ejecución que se creó con el método de temporización setTimeout( ) y su punto de inicio es 00. Ejecuto el temporizador y ahora marca 41.

Si invoco el método de temporización clearTimeout( ) en este método activo setTimout( ), lo dejará inactivo durante ese período, y cada vez que vuelva a ejecutar el método de temporización setTimeout( ), comenzará a contar desde 41, no desde 00 .

Para que el temporizador comience desde 00, debe restablecer su contador. Esa es la lógica.

Ejemplo: detener el tiempo - 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

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

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

El cronómetro está completo, y así es como debería verse.