So erstellen Sie eine Stoppuhr in JavaScript

JavaScript-Stoppuhren bzw. Stop-Down-Timer lassen sich mit den JavaScript-Timing-Methoden implementieren, die in Zeitintervallen ausgeführt werden.

JavaScript-Timing-Methoden automatisieren eine bestimmte Aufgabe, die spontan erledigt werden muss, ohne dass Sie auf eine Schaltfläche klicken oder ein Ereignis aufrufen müssen.

Das JavaScript-Timing besteht aus zwei Schlüsselmethoden:

• setTimeout( "Javascript-Ausdruck", Millisekunden );
• clearTimeout( ID von setTimeout( ) );

Wenn Sie die JavaScript-Timing-Methoden verwenden, müssen Sie verstehen, wie JavaScript Anweisungen in Zeitintervallen ausführt.

Die setTimeout( )-Methode

Syntax:

 setTimeout( "JavaScript Statements", milliseconds );

Die JavaScript-Timing-Methode setTimeout( ) akzeptiert nur zwei Parameter:

• Erster Parameter: Dieser Parameter sind die JavaScript-Anweisungen, die Sie ausführen möchten. Ihr kann auch ein String-Funktionsname übergeben werden.
• zweiter Parameter: gibt die Millisekunden an, die es dauern wird, bevor die JavaScript-Anweisungen im ersten Parameter ausgeführt werden. Es kann einfach als (Delay On Execution) bezeichnet werden.

Beispiel: Aufbau der setTimeout( )-Methode

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

Beispiel: Millisekunden berechnen

Um mit den Zeitmessungsmethoden für JavaScript-Ereignisse arbeiten zu können, ist es sehr wichtig, dass Sie wissen, wie Millisekunden berechnet werden.

Sie haben eine Sekunde ( 1 s ) in tausend Millisekunden ( 1000 ms )

Millisekunden Formeln

 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

Das bedeutet 300 Millisekunden = 0,3 Sekunden, nicht bis zu einer Sekunde (1s). Ihre JavaScript-Anweisungen werden in einem Zeitintervall von 0,3 Sekunden (0,3 s) ausgeführt.

Erstellen einer Stoppuhr

Mit den JavaScript-Timing-Event-Methoden können wir unsere Stoppuhr erstellen.

Beispiel: Die Struktur

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

Beispiel: JavaScript-Code für 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

Die clearTimeout( )-Methode

Um den Timer zu stoppen, müssen Sie die Timing-Ereignismethode clearTimeout( ) aufrufen, was sehr praktisch ist.

Es hat nur einen Parameter: die Rückgabe-ID der setTimeout( )-Methode

Syntax:

 clearTimeout( return ID of setTimeout() );

Hinweis: Die Zeitsteuerungsmethode setTimeout( ) gibt immer einen Wert zurück, und dieser Wert wird an die Zeitsteuerungsereignismethode clearTimeout( ) übergeben.

Der ClearTimeout( )-Parameter

var clearTime = setTimeout( "JavaScript-Anweisungen", 100 );

clearTime-Variable wird von der setTimeout( )-Timing-Methode als Wert zurückgegeben, der als ID an clearTimeout( ID ) übergeben werden kann, um darauf zu verweisen - clearTimeout( clearTime );

Wie es funktioniert

Immer wenn die Timing-Methode clearTimeout( ) für eine aktive Timing-Methode setTimeout( ) aufgerufen wird, stoppt die Timing-Methode clearTimeout( ) die Ausführung der setTimeout( )-Timing-Methode, ohne deren Ausführung jedoch vollständig zu zerstören.

Die Timing-Methode setTimeout( ) wird während des Zeitraums, in dem die Timing-Methode clearTimeout( ) aufgerufen wird, inaktiv gelassen, und wenn Sie die Timing-Methode setTimeout( ) erneut ausführen, beginnt sie an dem Punkt, an dem ihre Ausführung gestoppt wurde, und beginnt nicht von vorne von Anfang an.

Genau wie wenn Sie einen MP3-Media-Player anhalten und dann wiedergeben, wird die Wiedergabe von der vorherigen Position fortgesetzt, aber nicht von vorne begonnen.

Nehmen wir zum Beispiel an, ich habe einen laufenden Timer, der mit der Timing-Methode setTimeout( ) erstellt wurde und dessen Startpunkt 00 ist. Ich lasse den Timer laufen und er zeigt jetzt 41 an.

Wenn ich die Timing-Methode clearTimeout( ) für diese aktive setTimout( )-Methode aufrufe, wird sie während dieses Zeitraums inaktiv, und wenn ich die setTimeout( )-Timing-Methode erneut ausführe, beginnt sie bei 41 zu zählen, nicht bei 00 .

Damit der Timer bei 00 beginnt, müssen Sie seinen Zähler zurücksetzen. Das ist die Logik.

Beispiel: Stoppen Sie die Zeit – 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

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

Der HTML-Code

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

Die Stoppuhr ist fertig und so sollte sie aussehen.