Jak stworzyć stoper w JavaScript

Stoper JavaScript, a raczej stoper, można zaimplementować za pomocą metod synchronizacji JavaScript, które są wykonywane w odstępach czasu.

Metody pomiaru czasu JavaScript automatyzują określone zadanie do wykonania w locie, bez konieczności klikania przycisku lub wywoływania zdarzenia.

Taktowanie JavaScript składa się z dwóch kluczowych metod:

• setTimeout( "wyrażenie javascript", milisekundy );
• clearTimeout( ID funkcji setTimeout( ) );

Korzystając z metod pomiaru czasu JavaScript, musisz zrozumieć, w jaki sposób JavaScript wykonuje instrukcje w odstępach czasu.

Metoda setTimeout()

Składnia:

 setTimeout( "JavaScript Statements", milliseconds );

Metoda synchronizacji JavaScript setTimeout() przyjmuje tylko dwa parametry:

• pierwszy parametr: ten parametr to instrukcje JavaScript, które chcesz wykonać. Można do niego również przekazać nazwę funkcji łańcuchowej.
• drugi parametr: określa milisekundy, które mają zająć przed wykonaniem instrukcji JavaScript w pierwszym parametrze. Można go po prostu nazwać (Opóźnienie wykonania).

Przykład: Struktura metody setTimeout()

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

Przykład: Obliczanie milisekund

Aby pracować z metodami pomiaru czasu zdarzeń JavaScript, bardzo ważne jest, aby zrozumieć, jak obliczać milisekundy.

Masz jedną sekundę ( 1s ) na tysiąc milisekund ( 1000ms )

Formuły milisekund

 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

Oznacza to 300 milisekund = 0,3 sekundy, a nie do jednej sekundy (1s). Twoje instrukcje JavaScript będą wykonywane w odstępie czasu 0,3 sekundy (0,3s).

Tworzenie stopera

Korzystając z metod zdarzeń czasowych JavaScript, możemy stworzyć nasz stoper.

Przykład: Struktura

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

Przykład: kod JavaScript dla 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()

Aby zatrzymać stoper, musisz wywołać metodę zdarzenia odliczania czasu clearTimeout(), co jest bardzo przydatne.

Ma tylko jeden parametr: identyfikator powrotu metody setTimeout()

Składnia:

 clearTimeout( return ID of setTimeout() );

Uwaga: Metoda odmierzania czasu setTimeout() zawsze zwraca wartość, która jest przekazywana do metody odmierzania czasu zdarzenia clearTimeout().

Parametr ClearTimeout()

var clearTime = setTimeout( "Oświadczenia JavaScript", 100 );

Zmienna clearTime jest zwracana jako wartość przez metodę pomiaru czasu setTimeout(), która może być przekazana do funkcji clearTimeout(ID) jako identyfikator w celu odniesienia się do niej - clearTimeout( clearTime );

Jak to działa

Za każdym razem, gdy metoda pomiaru czasu clearTimeout() jest wywoływana w aktywnej metodzie pomiaru czasu setTimeout(), metoda pomiaru czasu clearTimeout() zatrzyma wykonywanie metody pomiaru czasu setTimeout(), ale bez całkowitego zniszczenia jej wykonania.

Metoda odmierzania czasu setTimeout() pozostaje bezczynna przez okres, w którym wywoływana jest metoda odmierzania czasu clearTimeout(), a po ponownym wykonaniu metody odmierzania czasu setTimeout() rozpocznie się od momentu, w którym jej wykonanie zostało zatrzymane, a nie od początku od początku.

Podobnie jak wtedy, gdy zatrzymasz odtwarzacz multimedialny mp3, a następnie go odtworzysz, kontynuuje odtwarzanie od poprzedniej pozycji, ale nie zaczyna się od początku.

Załóżmy na przykład, że mam uruchomiony zegar, który został utworzony przy użyciu metody pomiaru czasu setTimeout(), a jego punktem początkowym jest 00. Uruchomiłem zegar i teraz odczytuje 41.

Jeśli wywołam metodę pomiaru czasu clearTimeout() w tej aktywnej metodzie setTimout(), spowoduje to, że będzie ona bezczynna w tym okresie, a za każdym razem, gdy ponownie wykonuję metodę pomiaru czasu setTimeout(), odliczanie rozpocznie się od 41, a nie od 00 .

Aby czasomierz startował od 00, musisz zresetować jego licznik. Taka jest logika.

Przykład: 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

 #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

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

Stoper jest skończony i tak powinien wyglądać.