suchen

Heim >Web-Frontend >Front-End-Fragen und Antworten >So verwenden Sie Date, um eine Stoppuhr in Javascript zu implementieren

So verwenden Sie Date, um eine Stoppuhr in Javascript zu implementieren

PHPz
PHPzOriginal
2023-04-21 10:05:19563Durchsuche

Mit der Entwicklung der modernen Gesellschaft wird die Rolle von Zeitschaltuhren immer wichtiger. Ob es sich um die Zeitmessung im täglichen Leben oder um die Zeitmessung bei Sportwettkämpfen und Computerwettbewerben handelt, sie muss als Stoppuhr implementiert werden. Heute stellen wir vor, wie Sie das Date-Objekt in JavaScript verwenden, um eine Stoppuhr zu implementieren.

Werfen wir zunächst einen Blick auf das Date-Objekt von JavaScript. Das Date-Objekt ist ein sehr häufig verwendetes Objekt in JavaScript, das zur Darstellung von Uhrzeit und Datum verwendet wird. Mit der new Date()-Anweisung können wir ein neues Date-Objekt erstellen. Standardmäßig werden bei Verwendung der new Date()-Anweisung die aktuelle Uhrzeit und das aktuelle Datum zurückgegeben.

Das Folgende ist ein Beispiel, das zeigt, wie ein Date-Objekt verwendet wird, um die aktuelle Uhrzeit abzurufen: 

let now = new Date();
console.log(now);

Das Ausgabeergebnis ist die aktuelle Uhrzeit und das aktuelle Datum, zum Beispiel: 

Thu Oct 07 2021 12:08:20 GMT+0800 (中国标准时间)

Nachdem wir die aktuelle Uhrzeit erhalten haben, können wir sie verwenden, um eine Stoppuhr einbauen. Die Stoppuhr muss einen Timer verwenden, und die Timing-Funktion wird durch Festlegen der Funktion setInterval () implementiert. Das Folgende ist ein Beispiel, das zeigt, wie die Funktion setInterval() zum Implementieren eines einfachen Timers verwendet wird: 

let count = 0;
let intervalId = setInterval(function() {
   count++;
   console.log(count);
}, 1000);

In diesem Beispiel verwenden wir die Zählvariable, um die Anzahl der verstrichenen Sekunden aufzuzeichnen um 1 erhöht. und an die Konsole ausgeben. Wir haben die Funktion setInterval() verwendet und sie der Variable „intervallId“ zugewiesen. Die Funktion setInterval() führt die übergebene Funktion in regelmäßigen Abständen aus und gibt eine eindeutige Kennung für nachfolgende Vorgänge zurück.

Als nächstes können wir der Stoppuhr Start-, Stopp- und Reset-Funktionen hinzufügen. Nachfolgend finden Sie eine vollständige Implementierung, die die 3 Schaltflächen Start, Stopp und Reset umfasst und korrekt getimt werden kann. 

<html>
<head>
   <title>JavaScript秒表</title>
</head>
<body>
   <h1>JavaScript秒表</h1>
   <div id="clock">00:00:00</div>
   <button id="startBtn">开始</button>
   <button id="stopBtn">停止</button>
   <button id="resetBtn">重置</button>
</body>
<script>
   let intervalId = null;
   let count = 0;
   let clock = document.getElementById('clock');
   let startBtn = document.getElementById('startBtn');
   let stopBtn = document.getElementById('stopBtn');
   let resetBtn = document.getElementById('resetBtn');

   function startClock(){
      intervalId = setInterval(function() {
         count++;
         let hours = Math.floor(count / 3600);
         let minutes = Math.floor((count - hours * 3600) / 60);
         let seconds = count - hours * 3600 - minutes * 60;
         clock.innerHTML = hours.toString().padStart(2, '0') + ':' + 
                           minutes.toString().padStart(2, '0') + ':' + 
                           seconds.toString().padStart(2, '0');
      }, 1000);
   }

   function stopClock(){
      clearInterval(intervalId);
   }

   function resetClock(){
      clearInterval(intervalId);
      count = 0;
      clock.innerHTML = '00:00:00';
   }

   startBtn.addEventListener('click', startClock);
   stopBtn.addEventListener('click', stopClock);
   resetBtn.addEventListener('click', resetClock);
</script>
</html>

In diesem Beispiel haben wir zunächst drei Schaltflächen erstellt und ihnen Start-, Stopp- und Reset-Funktionen hinzugefügt. Wir verwenden die Funktion getElementById(), um die HTML-Elemente auf der Seite abzurufen und sie den entsprechenden JavaScript-Variablen zuzuweisen.

In der Funktion startClock() verwenden wir die Funktion setInterval() zur Zeitmessung und geben die Timing-Ergebnisse im Format hh:mm:ss auf der Seite aus. Wir verwenden die Funktion Math.floor() zum Runden und die Funktion padStart() zum Formatieren der Zahl in eine zweistellige Zeichenfolge für eine einfache Ausgabe auf der Seite. In den Funktionen stopClock() und resetClock() verwenden wir die Funktion clearInterval(), um den Timer zu stoppen und die Zähl- bzw. Uhrwerte zurückzusetzen.

Wenn Sie JavaScript zur Implementierung einer Stoppuhr verwenden möchten, sollte Ihnen dieses Beispiel eine Hilfe sein. Sie können den Code nach Bedarf ändern und erweitern, um umfangreichere und komplexere Timing-Funktionen zu erreichen. Okay, das war's für den Moment. Ich hoffe, dieser Artikel wird Ihnen hilfreich sein.

Das obige ist der detaillierte Inhalt vonSo verwenden Sie Date, um eine Stoppuhr in Javascript zu implementieren. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

JavaScript html count date math 标识符 字符串 对象
Stellungnahme：
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Vorheriger Artikel：So geben Sie Zahlen in Javascript einNächster Artikel：So geben Sie Zahlen in Javascript ein

In Verbindung stehende Artikel

Mehr sehen