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'-HTML-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">

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

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

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 korrekten Bilder geladen werden:

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:

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

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:

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:

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

Wenn du 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.

Im nächsten Beispiel möchte ich euch eine Uhr mit Zeigern vorstellen, die ebenfalls nur mit HTML, CSS und Javascript programmiert ist. Viel Spaß!