Uhrzeit:

Eine LCD Uhr

Nachdem wir hier eine einfache digitale Uhr programmiert haben, wollen wir diese hier nun etwas anders gestalten.

Viele kennen sicher einen normalen digitalen Wecker. Dieser zeigt die Uhrzeit in fetten leuchtenden Buchstaben an. Das wollen wir hier auch versuchen.

Der Quellcode

Zum vorherigen Beispiel in der einfachen digitalen Uhr hat sich am Javascript nichts geändert:

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

        SetTime();
</script>                    

Allerdings hat sich der HTML Code geändert, da wir etwas CSS hinzugefügt haben.

Vorher:

<p id="Time"></p>                     

Nachher:

<p id="Time" 
style="font-family:Bahnschrift;
font-size:32px; 
color:#04F404;
font-weight:900;
text-shadow:0px 0px 12px #b6ff00; 
border:3px solid #04F404; 
padding: 0.2em;
border-radius: 5px;
width:max-content;"></p>                        

Wie funktioniert das? an dem Element "Time" einem Paragraphen (deshalb "<p></p>" für Paragraph) haben wir ein "Style" Attribut angehangen. Damit kann man das aussehen des Elements verändern.

Mittels "font-size" kann man die größe der Schriftart ändern. Die Zahl gibt die größe an. Je größer die Zahl je größer die Schrift. das "px" steht für Pixel und ist die Maßeinheit. Mehr dazu findet ihr hier: W3C CSS Units.

Probiert es hier doch gleich mal aus und setzt die Schriftart auf 32px:

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

Um die Zeit nun auch genau so darzustellen wie ihr es oben seht müssen wir noch weitere Attribute hinzufügen:

font-family:Bahnschrift;

font-family ist die Schriftart. Ich habe mich für "Bahnschrift" entschieden, da diese einer LCD Uhr sehr nah kommt. Es gibt aber viele andere Schriftarten.

Probiert doch mal "Verdana", "Calibri" oder "Fantasy" aus und überlegt euch was euch am Besten gefällt.

font-size:32px;

Wie oben beschrieben gibt font-size die größe der Schrift an. Hier könnt ihr euch nach belieben austoben und verschiedene größen ausprobieren.

color:#04F404;

Das Attribut "color" gibt die Schriftfarbe an. Der Wert "#04F404" ist ein Farbcode im Hexidecimal. Das klingt kompliziert geht aber auch einfacher. Probiert doch einfach mal "color:green;".

  • font-family:Bahnschrift;
  • font-size:32px;
  • color:#04F404;
  • font-weight:900;
  • text-shadow:0px 0px 12px #b6ff00;
  • border:3px solid #04F404;
  • padding: 0.2em;
  • border-radius: 5px;
  • width:max-content;

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


Vielleicht ist euch aufgefallen, dass sich die breite der Uhr je nach Uhrzeit etwas verschiebt. Das gefällt mir nicht so gut. Vielleicht habt ihr eine Idee wie man die Breite immer einheitlich angibt. Falls ja, dann lasst es mich über das Kontaktformular wissen!

Als nächstes möchte ich euch eine Uhr mit 4 Symbolen vorstellen. Sie soll also keine Uhrzeit mit Ziffern anzeigen, sondern diese mittels Bildern angeben. Mal schauen ob euch das gefällt?!