JavaScript-Stoppuhr
![JavaScript-Stoppuhr](/img/JavaScript/feature-image---javascript-stopwatch.webp)
Eine Stoppuhr wird verwendet, um die Zeit zwischen ihrer Aktivierung und Deaktivierung zu messen. Es hilft, die Zeit zu messen, die für eine bestimmte Aktivität benötigt wird. Wir bauen unsere Stoppuhr mit den JavaScript-Timing-Methoden setTimeout()
und clearTimeout()
, die bei zeitintervallbezogenen Implementierungen helfen. Die Stoppuhr hat ein Display und drei Knöpfe. Das Display zeigt die Uhrzeit und die drei Tasten zum Starten, Stoppen und Zurücksetzen der Stoppuhr an. In diesem Tutorial erfahren Sie, wie Sie eine Stoppuhr in JavaScript erstellen.
JavaScript-Stoppuhr
HTML Quelltext
<h1><time>00:00:00</time></h1>
<button id="strt">start</button>
<button id="stp">stop</button>
<button id="rst">reset</button>
Im obigen Code verwenden wir HTML, um die Zeit der Stoppuhr anzuzeigen und erstellen die drei erforderlichen Schaltflächen start
, stop
und reset
.
JavaScript-Code
var h1 = document.getElementsByTagName('h1')[0];
var start = document.getElementById('strt');
var stop = document.getElementById('stp');
var reset = document.getElementById('rst');
var sec = 0;
var min = 0;
var hrs = 0;
var t;
function tick() {
sec++;
if (sec >= 60) {
sec = 0;
min++;
if (min >= 60) {
min = 0;
hrs++;
}
}
}
function add() {
tick();
h1.textContent = (hrs > 9 ? hrs : '0' + hrs) + ':' +
(min > 9 ? min : '0' + min) + ':' + (sec > 9 ? sec : '0' + sec);
timer();
}
function timer() {
t = setTimeout(add, 1000);
}
timer();
start.onclick = timer;
stop.onclick = function() {
clearTimeout(t);
} reset.onclick = function() {
h1.textContent = '00:00:00';
seconds = 0;
minutes = 0;
hours = 0;
}
-
Wir wählen zuerst alle HTML-Elemente mit Selektoren aus, damit wir sie mit JavaScript manipulieren können und initialisieren
3
Variablenhrs
,min
undsec
, um die aktuelle Uhrzeit zu speichern. Wir deklarieren auch eine Variablet
zum Speichern vonsetTimeout()
und löschen sie durch Aufrufen vonclearTimeout()
. -
Wir haben die Timer-Funktion an den
start
-Button angehängt. Immer wenn wir auf denstart
-Button klicken, wird die Funktiontimer()
aufgerufen, die wiederum im Abstand von1
Sekunde die Funktion add aufruft. Die Funktionadd()
ruft die Funktiontick()
auf, um Sekunden um1
zu erhöhen und Minuten und Stunden entsprechend anzupassen. Es setzt den Inhalt des Displays zurück, um die neue Uhrzeit anzuzeigen, und ruft sich dann durch erneuten Aufruf der Funktiontimer()
wieder auf. -
Wir haben den
clearTimeout()
an denstop
-Button angehängt, um den periodischen Aufruf der Add-Funktion zu stoppen. -
Wir haben eine Funktion angehängt, die die Zeit auf
00:00:00
zurücksetzt und diesec
,min
undhrs
auf0
aufreset
zurücksetzt.
Harshit Jindal has done his Bachelors in Computer Science Engineering(2021) from DTU. He has always been a problem solver and now turned that into his profession. Currently working at M365 Cloud Security team(Torus) on Cloud Security Services and Datacenter Buildout Automation.
LinkedIn