Symbole Uhr

Eine Uhr mit Bildern oder Symbolen programmieren

Symbole Uhr

Uhrzeit:

Watch Symbol

Uhr aus Symbolen

Wir haben nun zwei digitale Uhren programmiert. Nun habe ich daran gedacht, dass es manchmal gar nicht so wichtig ist die Uhrzeit genau zu wissen. Es reicht, ob es morgens, mittags, abends oder nachts ist.

Daher hier eine Uhr bestehend aus vier Symbolen die die ungefähre Uhrzeit angeben. Im Laufe der Erklärung seht ihr wann welches Symbol angezeigt wird.

Es ist etwas schwer nachzuprüfen ob das Programmierte auch funktioniert. Daher habe ich hier eine "Schnellvorlauf" Funktion programmiert. Damit vergeht die Zeit wie im Flug und ihr seht wie sich die Symbole veründern. Natürlich erkläre ich euch auch den Schnellvorlauf und wie er funktioniert.

Der Quellcode

Zuerst benötigte ich ein img Tag um die Bilder anzuzeigen: 

<img id="watch_4Symbols_01" src="images/watch_4Symbols_01/sun_001.jpg" alt="Watch Symbol" style="width:100px;height:100px">

Das Img HTML Tag hat eine id

Hier eine kurze Erklärung der einzelnen Attribute die ich verwendet habe:

Attribut Erklärung
id Ein eindeutiger Bezeichner, damit wir uns später im Javascript auf dieses Bild beziehen können. In unserem Falle "watch_4Symbols_01"
src Gibt die Quelle des Bildes an. Auf dem Server liegt ein Bild im Verzeichnis "images/watch_4Symbols_01/" mit dem Namen "sun_001.jpg". Dieses Bild soll angezeigt werden.
alt Ein Text falls das Bild nicht angezeigt werden kann. Es ist auch hilfreich damit Blinde Menschen das Bild verstehen können.
style Enthält Angaben zum aussehen des Bildes. In unserem Falle die breite und größe mit jeweils 100px.

Nun soll sich das Bild, je nach Uhrzeit, verändern. Hierfür benötigen wir etwas Javascript:

See the Pen Watch 4 Symbols 001 by Fabian (@Onkelllepie) on CodePen.

Die Hauptmethode ist "SetTime_watch_4Symbols_01". Diese lädt die aktuelle Uhrzeit und vergleicht diese mit zwei anderen Variablen die als 06:00 Uhr und 10:00 Uhr festgelegt sind. Wenn die aktuelle Uhrzeit in diesem Zeitraum liegt, dann wird das Bild "sun_001.jpg" angezeigt.

Nun habe ich mich entschieden die Uhr mit 4 Symbolen zu programmieren:

Zeit Bild Bild Darstellung
06:00-10:00 sun_001.jpg
10:00-16:00 sun_002.jpg
16:00-22:00 sun_003.jpg
22:00-06:00 moon.jpg

Die Bilder habe ich selbst mit einem Bildbearbeitungsprogramm erstellt. Ein Grafikdesigner kann dies sicher besser als ich ;-)

Im ersten Teil des Javascript haben wir nur ein Bild geladen, wenn es zwischen 06:00 Uhr und 10:00 Uhr ist. Dies erweitern wir nun damit zu den oben genannten Zeiten die verschiedenen Bilder geladen werden:

See the Pen Watch 4 Symbols 002 by Fabian (@Onkelllepie) on CodePen.

Nun ist es aber schwierig zu überprüfen ob unsere Programmierung funktioniert. Wir wollen ja nicht den ganzen Tag davor sitzen und schauen ob es passt.
Deshalb manipulieren wir die Uhrzeit, sodass wir die Zeit einfach schneller laufen lassen.

Dafür lassen wir uns erst einmal die aktuelle Uhrzeit anzeigen:

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

Nun ändern wir das Javascript so, dass jede Sekunde eine Stunde vergeht:

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

Das funktioniert, da wir die Variable "date_fast" außerhalb der Methode "SetTime_watch_4Symbols_01" deklarieren und bei jedem Aufruf der Methode 3.600.000 Millisekunden (1h) dazuaddieren.
Da die Methode "SetTime_watch_4Symbols_01" jede Sekunde aufgerufen wird: 

setTimeout(SetTime_watch_4Symbols_01, 1000);

Wird jede Sekunde eine Stunde auf die letzte Uhrzeit addiert.

Nun müssen wir den neuen Code auf die Programmierung mit den Bildern von oben übertragen:

See the Pen Watch 4 Symbols 005 by Fabian (@Onkelllepie) on CodePen.

Um zwischen der normalen Uhrzeit und dem Schnellvorlauf hin und her zu schalten, bauen wir noch eine Checkbox in den HTML Code ein und verändern das Javascript ein wenig:

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

Nun kannst du sehr einfach überprüfen ob sich die Bilder, je nach Uhrzeit, verändern.

Ich hoffe du hast etwas gelernt und du hattest etwas spaß damit zu verstehen wie man eine Uhr aus 4 Symbolen erstellt. Natürlich kannst du dich nun selbst ausprobieren und zum Beispiel:

  • Eine Uhr mit fünf oder mehr Bildern erstellen.
  • Andere Bilder aus dem Internet verwenden und diese damit austauschen (aber bitte achte darauf das Urheberrecht nicht zu verletzen. Veröffentliche keine Bilder für die nicht ganz klar gekennzeichnet ist, dass diese frei verwendet werden dürfen.)
  • Verändere den Code so, damit immer zwei Stunden pro Sekunde vergehen.