Cum se creează un cronometru în JavaScript

Cronometrul JavaScript sau mai degrabă cronometrul de oprire poate fi implementat folosind metodele de sincronizare JavaScript care sunt executate în intervale de timp.

Metodele de sincronizare JavaScript automatizează o anumită sarcină care trebuie efectuată din mers, fără a fi nevoie să faceți clic pe un buton sau să apelați un eveniment.

Timpul JavaScript este alcătuit din două metode cheie:

• setTimeout( „expresie javascript”, milisecunde);
• clearTimeout( ID-ul setTimeout( ) );

Când utilizați metodele de sincronizare JavaScript, trebuie să înțelegeți cum JavaScript execută instrucțiunile în intervale de timp.

Metoda setTimeout().

Sintaxă:

 setTimeout( "JavaScript Statements", milliseconds );

Metoda de sincronizare JavaScript setTimeout( ) ia doar doi parametri:

• primul parametru: acest parametru este instrucțiunile JavaScript pe care doriți să le executați. De asemenea, îi poate fi transmis un nume de funcție șir.
• al doilea parametru: specifică milisecundele pe care le va dura înainte de a executa instrucțiunile JavaScript din primul parametru. Poate fi denumit pur și simplu ( Întârziere la execuție ).

Exemplu: Structura metodei setTimeout().

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

Exemplu: calcularea milisecundelor

Pentru a lucra cu metodele de sincronizare a evenimentelor JavaScript, este foarte important să înțelegeți cum să calculați milisecunde.

Ai o secundă (1s) într-o mie de milisecunde (1000ms)

Formule de milisecunde

 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

Aceasta înseamnă 300 de milisecunde = 0,3 secunde, nu până la o secundă (1s). Declarațiile dvs. JavaScript vor fi executate într-un interval de timp de 0,3 secunde (0,3 secunde).

Crearea unui cronometru

Folosind metodele JavaScript de sincronizare a evenimentelor, ne putem crea cronometrul.

Exemplu: Structura

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

Exemplu: cod JavaScript pentru 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

Metoda clearTimeout().

Pentru a opri cronometrul, trebuie să apelați metoda evenimentului de sincronizare clearTimeout( ), iar acest lucru este foarte util.

Are doar un parametru: ID-ul de returnare al metodei setTimeout().

Sintaxă:

 clearTimeout( return ID of setTimeout() );

Notă: Metoda de temporizare setTimeout( ) returnează întotdeauna o valoare, iar acea valoare este transmisă metodei de temporizare clearTimeout( ).

Parametrul ClearTimeout( ).

var clearTime = setTimeout( "Instrucțiuni JavaScript", 100 );

Variabila clearTime este returnată ca valoare de metoda de temporizare setTimeout( ), care poate fi transmisă clearTimeout( ID ) ca ID pentru a face referire la aceasta - clearTimeout( clearTime );

Cum functioneaza

Ori de câte ori metoda de temporizare clearTimeout( ) este apelată pe o metodă de temporizare setTimeout( ) care este activă, metoda de temporizare clearTimeout( ) va opri execuția metodei de temporizare setTimeout(), dar fără a distruge în întregime execuția acesteia.

Metoda de temporizare setTimeout( ) este lăsată inactivă în timpul perioadei în care este apelată metoda de temporizare clearTimeout( ), iar când reexecuți metoda de temporizare setTimeout( ), aceasta va începe din punctul în care execuția sa a fost oprită, nu începe de la început. de la inceput.

La fel ca atunci când întrerupeți un player media mp3 și apoi îl redați, redarea continuă din poziția anterioară, dar nu începe de la început.

De exemplu, să presupunem că am un cronometru care rulează care a fost creat folosind metoda de temporizare setTimeout( ), iar punctul său de pornire este 00. Rulez cronometrul și acum citește 41.

Dacă apelez la metoda de temporizare clearTimeout( ) pe această metodă activă setTimout( ), aceasta o va face inactivă în acea perioadă și ori de câte ori reexecuez metoda de temporizare setTimeout( ), va începe să numere de la 41, nu de la 00 .

Pentru ca temporizatorul să pornească de la 00, trebuie să-i resetați contorul. Asta e logica.

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

CSS-ul

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

HTML-ul

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

Cronometrul este finalizat și așa ar trebui să arate.