Weltzeit Uhr

Der Quellcode

Ich möchte euch hier erklären wie ich die Weltzeituhr programmiert habe. Zuerst habe ich eine Tabelle erstellt:

See the Pen Weltzeit Uhr I by Fabian (@Onkelllepie) on CodePen.

Diese ist erst einmal statisch. Das heißt die Uhrzeit ändert sich nicht. Die Tabelle stellt unser Grundgerüst dar und wird nun nach und nach erweitert.
Die Tabelle enthält oben die Länder die man später auswählen kann.
Danach erfolgt eine Überschrift und die Daten von Deutschland und dem ausgewähltem Land.

Als nächsten Schritt wollen wir erst einmal die aktuelle Zeit in Deutschland anzeigen.
Hierfür nehmen wir den Code von Einfache digitale Uhr.
Wir nutzen die Javascript Funktion und kopieren das HTML in unsere Uhrzeit Tabelle für Deutschland:

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

Jetzt benötigen wir eine Javascript Funktion die die aktuelle Uhrzeit "umrechnet" und uns die Uhrzeit in, zum Beispiel, Großbritanien anzeigt.
Hierfür müsst ihr allerdings wissen, dass die "Deutsche Zeit" nicht die "Normale" Zeit ist. Die Welt unterteilt sich in verschiedene Zeitzonen.
Die UTC Zeit ist dabei die "Koordinierte Weltzeit" und ist der Startpunkt unserer Berechnungen.
Addiert man eine Stunde zur UTC Zeit hinzu erhält man die "Deutsche Zeit", oder auch Mitteleuropäische Zeit (MEZ).
In der Sommerzeit muss man 2 Stunden hinzu addieren. Dies lassen wir in unserer Implementierung aber außer Acht da es sonst zu kompliziert wird.
Eventuell habt Ihr Lust eine Variante mit Sommerzeit zu erstellen. Dann lasst Sie mir gerne über das Formular zukommen.

In folgendem CodePen zeige ich euch nur die Methode um aus der UTC Zeit die britische Zeit anzuzeigen. Gerne könnt Ihr euch dort ausprobieren und eine andere Zeit berechnen.
Zum Beispiel die von New York?:

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

Ich hoffe dies verdeutlicht ein wenig die Umrechnung und wie diese funktioniert. Im CodePen habe ich die umgerechnete Zeit, den Versatz (also Offset), die UTC Zeit und die aktuelle regionale Zeit angezeigt.
Wenn ihr den Methodenaufruf ganz unten im Javascript ändert, dann ergibt sich auch eine andere "umgerechnete Zeit":

// Aufrufen der Methode
SetTime_ByOffset_Min(120);

Ändert dies zu

// Aufrufen der Methode
SetTime_ByOffset_Min(-300);

Dadurch ändert sich die umgerechnete Zeit. Die UTC Zeit und die aktuelle Zeit bleiben unverändert.

Nun können wir bereits die aktuelle Uhrzeit anzeigen und die Uhrzeit anhand eines Versatzes neu berechnen. Überhnehmen wir die Funktionen in unsere Tabelle:

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

Hierfür habe ich die "offset_min" als globale Variable definiert, damit ist diese leichter für uns zu ändern.
Am Ende der Methode "SetTime_ByOffset_Min()" habe ich noch "SetTimeout(SetTime_ByOffset_Min,1000)" hinzugefügt, damit die Methode jede Sekunde aufgerufen wird und sich die Zeit auch aktualisiert.
Im HTML habe ich die Label aus unserem Beispiel einfach nur an die richtigen Stellen kopiert.

Nun müssen wir die Links "Frankreich" und "Großbritannien" mit einem OnClick Event versehen, damit unsere Methode auch aufgerufen wird, wenn wir die Zeit "umstellen" möchten. Hier ein kleines Beispiel:

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

Innerhalb des Links (also dem "<a>" Element) gibt es ein Attribut "href". Dies bestimmt, was passieren soll wenn man auf einen Link klickt. Normalerweise öffnet man damit eine andere Website. In unserem Fall soll stattdessen die Javascript Methode "ClickEventMethode" aufgerufen werden:

 <a href="javascript:ClickEventMethode('gb')">Großbritanien</a>

Mit einem Argument "gb". Die Javascript Methode ist definiert als:

function ClickEventMethode(region)
{
   document.getElementById(
    "clicked"
  ).innerHTML = region;
}

Der Eingabeparameter "region" wird einfach in das HTML Tag "clicked" eingefügt.

Allerdings wollen wir ja nicht nur die "region" anzeigen, sondern auch den Zeitversatz (offset) zur UTC Zeit, die umgerechnete Uhrzeit, das Land und die Hauptstadt.
Diese Informationen müssen wir erst einmal herausfinden und dann im Code definieren. Für Großbritanien, Frankreich und Deutschland sind folgende Informationen bekannt:

Region	Zeitversatz zu UTC	Zeitzone	Land	Hauptstadt
gb	0	UTC	Großbritannien	London
fr	60	UTC+1	Frankreich	Paris
de	60	UTC+1	Deutschland	Berlin

Wie wir sehen können haben Deutschland und Frankreich die gleiche Zeitzone und daher die gleiche Zeit.

Die Zeitzonenzuordnung zu den Ländern müssen wir nun in unsere Programmierung einarbeiten. Es gibt dafür verschiedene Möglichkeiten. Ich stelle euch hier mal zwei vor.

1. Implementierung mittels "if" Anweisung:

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

2. Implementierung mittels Javascript Objekten

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

Die zweite Implementierung mittels Javascript Objekten hat den Vorteil, dass die Daten leichter geändert werden können und es dadurch übersichtlicher ist. Ich habe hier ein Array (also eine Art Liste) von Objekten mit verschiedenen Eigenschaften definiert. Was Javascipt Objekte genau sind und wie sie funktionieren möchte ich hier offen lassen da dies den Rahmen zum Uhr Programmieren sprengen würde. Eventuell erstelle ich einmal ein separates Tutorial dazu.
Im Folgenden werden wir auf jeden Fall die Javascript Objekte verwenden, damit wir diese später leichter Erweitern können.

Lasst uns daher nun die Javascript Objekte in unsere eigentliche Weltzeituhr hinzufügen:

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

Nun gibt es aber ein Problem. Man kann zwar ein Land anklicken, aber die Zeit läuft nicht weiter. Also lasst uns das Lösen. Wir definieren einfach eine weitere globale Variable "selectedRegion" und setzen diese, wenn auf ein Land geklickt wurde. Und wir nutzen unsere "SetTimeout" Methode um die bestehende "SetTime_SelectedRegion" Methode ohne Parameter aufzurufen:

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

Nun funktioniert die Umrechnung der Zeit sehr gut. Erweitern wir nun unsere Liste der Länder. Wie ihr sehen werdet habe ich einfach nur die Javascript Objekte erweitert und die Links zum Anklicken hinzugefügt. Mehr ist nicht notwendig:

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

Als nächstes kümmern wir uns um das Design. Zuerst entfernen wir die Überschriften "Uhrzeit" und "Land" und weisen unserer Tabelle, den Spalten und Zeilen CSS Klassen zu:

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

Nun füllen wir die CSS Klassen nach belieben ;-). Ihr könnt wie immer gerne direkt im Editor etwas ändern und euch ausprobieren:

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

Als letztes habe ich mir Flaggen statt der Länderbezeichnung gewünscht, da dies ansprechender aussieht. Hierfür nutze ich Flaggen einer frei zugänglichen Quelle (www.welt-flaggen.de):

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

Ich hoffe ich konnte alles verständlich rüber bringen. Falls nicht, dann nutzt die Kontaktmöglichkeiten und schreibt mir eure Fragen oder Anmerkungen.
Falls Ihr Lust habt noch etwas selbst auszuprobieren, dann hier ein paar kleine Aufgaben:

• Erweitert den Code so, dass auch die Zeitzone von China (inkl. Flagge) angezeigt wird. Kleiner Tipp, die Flagge findet ihr mittels der Region "cn".
• Überarbeitet die Farben der Tabelle mit euren Lieblingsfarben. Vielleicht Lila, Rot oder Blau.
• Erweitert die Links der Flaggen so, dass man als Toolip (nutzt hierfür zum Beispiel das "title" Attribute) das Land sieht.
• Sehr schwierige Aufgabe: Erweitert die Links der Flaggen so, dass man als Toolip (nutzt hierfür zum Beispiel das "title" Attribute) das man direkt die Zeit im jeweiligen Land sieht.

Ich wünsche euch viel Spaß beim Lösen der Aufgaben.

Als nächstes möchte ich mich der Programmierung eines Timer (Zeit herunterlaufen lassen) widmen. Das kommt dann im März 2025.