Einfache digitale Uhr programmieren

Einfache digitale Uhr

Uhrzeit:

Dies ist das erste und einfachste Beispiel für eine Uhr. Wie ihr sehen könnt wird die Uhrzeit einfach digital angegeben.

Hierfür erstellen 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 nutzen dabei eine ganz einfache Funktion:


                        <script>
                        

                        function SetTime() { 

                        const date = new Date(); 

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

                        setTimeout(SetTime, 1000); 

                        } 

                        SetTime();
                        

                        </script>

Die Funktion "SetTime()" macht folgendes:

Es wird ein "Date" Objekt erzeugt, dass die aktuelle Uhrzeit enthält:


                        const date = new Date();

Mit folgendem Code wird die Uhrzeit 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 gesetzt wird, muss unsere Funktion "SetTime" regelmäßig aufgerufen werden. Hierfür bietet Javasacript eine Methode "SetTimeout" an. Diese ruft die angegbene 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 ersteinmal aufgerufen werden, damit die Uhrzeit gesezt 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();"
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.