JavaScript-Stoppuhr

Harshit Jindal 12 Oktober 2023 JavaScript

JavaScript-Stoppuhr

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

JavaScript-Stoppuhr

Wir wählen zuerst alle HTML-Elemente mit Selektoren aus, damit wir sie mit JavaScript manipulieren können und initialisieren 3 Variablen hrs, min und sec, um die aktuelle Uhrzeit zu speichern. Wir deklarieren auch eine Variable t zum Speichern von setTimeout() und löschen sie durch Aufrufen von clearTimeout().
Wir haben die Timer-Funktion an den start-Button angehängt. Immer wenn wir auf den start-Button klicken, wird die Funktion timer() aufgerufen, die wiederum im Abstand von 1 Sekunde die Funktion add aufruft. Die Funktion add() ruft die Funktion tick() auf, um Sekunden um 1 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 Funktion timer() wieder auf.
Wir haben den clearTimeout() an den stop-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 die sec, min und hrs auf 0 auf reset zurücksetzt.

Genießen Sie unsere Tutorials? Abonnieren Sie DelftStack auf YouTube, um uns bei der Erstellung weiterer hochwertiger Videoanleitungen zu unterstützen. Abonnieren

Autor: Harshit Jindal

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