Einfache digitale Uhr programmieren

Einfache digitale Uhr

Uhrzeit:

In diesem Beispiel lernst du, wie du mit HTML und JavaScript eine einfache digitale Uhr erstellst, die die aktuelle Uhrzeit anzeigt und jede Sekunde aktualisiert wird.
Die Uhr zeigt Stunden, Minuten und Sekunden an und läuft automatisch weiter, ohne dass die Seite neu geladen werden muss.

Wir bauen eine kleine Webseite, auf der die aktuelle Uhrzeit angezeigt wird.
Dazu verwenden wir zwei Dinge:

  • HTML – um ein Element auf der Seite zu erzeugen, in dem die Uhrzeit angezeigt wird
  • JavaScript – um die aktuelle Uhrzeit auszulesen und jede Sekunde zu aktualisieren

Zuerst wird eine einfache Fläche erstellt, in der die Uhrzeit steht. Danach sorgt ein kleines JavaScript-Programm dafür, dass dort immer wieder die aktuelle Zeit eingesetzt wird.

Deshalb wir uns eine leere HTML-Seite und kopieren dort folgendes HTML hinein. Das sieht dann so aus:

HTML Code:

<h1>Einfache digitale Uhr</h1>
<p id="Watch_Label">Uhrzeit:</p>
<p id="Time"></p>

Ergebnis:

Einfache digitale Uhr

Uhrzeit:

Leider wird die Uhrzeit noch nicht angezeigt. Denn es fehlt noch das JavaScript, um die Uhrzeit anzuzeigen. Um das JavaScript hinzuzufügen, könnt ihr innerhalb der Seite ein "<script>"-Tag hinzufügen und damit das JavaScript ausführen.

Wir verwenden dafür eine einfache Funktion:

<script>
function SetTime() { 
const date = new Date(); 
document.getElementById("Time").innerHTML = date.toLocaleTimeString(); 
setTimeout(SetTime, 1000); 
} 
SetTime();
</script>

Die Funktion "SetTime()" bewirkt folgendes:

Es wird ein "Date"-Objekt erzeugt, das die aktuelle Zeit enthält:

const date = new Date();

Mit folgendem Code wird die Uhrzeit ermittelt (ausgelesen):

date.toLocaleTimeString();

Und an unserem vorher im HTML definierten Element "Time" angezeigt: 

document.getElementById("Time").innerHTML = date.toLocaleTimeString();

Damit die Uhrzeit aber nicht nur einmal beim Laden der Seite angezeigt wird, muss unsere Funktion "SetTime" regelmäßig aufgerufen werden. Hierfür bietet JavaScript eine Methode "setTimeout" an. Diese ruft die angegebene Methode in regelmäßigen Zeitabständen auf.

In unserem Beispiel, wird die Methode "SetTime" alle 1.000 Millisekunden aufgerufen.

Wenn du mehr über die Methode setTimeout erfahren möchtest, dann kannst du das beim W3C nachlesen: setTimeout Reference

Zu guter Letzt muss unsere Methode überhaupt erst einmal aufgerufen werden, damit die Uhrzeit gesetzt werden kann. Deshalb rufen wir diese nach der Programmierung der Methode einfach auf: 

SetTime();

Am Ende sieht das dann genau so aus:

See the Pen SimpleDigitalWatch by Fabian (@Onkelllepie) on CodePen.

Mittels CodePen habt ihr nun die Möglichkeit das direkt hier im Browser auszuprobieren und auch zu Ändern.

Probiert doch mal folgendes aus:

  • Statt Uhrzeit, könnt ihr "meine Uhrzeit" schreiben.
  • Ändert die größe der Überschrift in h3.
  • Ändert die größe der Zeitanzeige und macht sie größer.
  • Setzt im JavaScript in der setTimeout Methode die Dauer von 1000 auf 100.
  • Setzt im JavaScript in der setTimeout Methode die Dauer von 1000 auf 2000.
  • Löscht die letzte Zeile im JavaScript "SetTime();". Was passiert dann?
  • Ganz oben wird ein Rahmen um die Uhr angezeigt. Füge diesen selbst im Beispiel hinzu.

Bis hierhin habt ihr alles toll gemacht. Nun wollen wir die Uhr etwas hübscher gestalten. Schaut euch dafür folgendes Beispiel an: LCD Uhr.