Weltzeit Uhr


	Deutschland (Berlin)	UTC+1/MESZ

Eine Uhr mit verschiedenen Zeitzonen

Hier möchte ich euch eine Uhr vorstellen, die die Zeit mit verschiedenen Zeitzonen anzeigt.

Im zweiten Schritt, möchte ich euch diese hier als analoge Version vorstellen.

Wie Ihr sicherlich wisst ist die Zeit in anderen Ländern eine andere als in Deutschland. Wenn man mit jemandem aus Australien telefonieren möchte, dann sollte man sich vorher erkundigen wie spät es dort ist.

Mit dieser Uhr könnt ihr genau das tun und die Zeiten in anderen Ländern ablesen. Wie genau das programmiert wird, erkläre ich euch jetzt.

Ziel ist es also eine Uhr zu erstellen die die lokale Uhrzeit (Deutschland) und die Uhrzeit eines anderen Landes anzeigt. Das andere Land kann durch klicken auf eine Flagge geändert werden. Die Vergleichsuhrzeit soll ich dadurch ändern.

Bilder: https://www.welt-flaggen.de/herunterladen/symbole#google_vignette

Update: Lange Zeit stand hier, dass die Uhrzeit von Großbritannien nicht stimmt, weil zur Sommerzeit die Uhrzeit nur eine Stunde Unterschied hat, zur Winterzeit aber 2h, und dass ich das noch reparieren müsste. Das habe ich jetzt getan. Der Grund für den Fehler und wie ich ihn behoben habe, steht weiter unten im Text bei der Erklärung des Codes.
Viel Spaß!

Der Quellcode

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

HTML

<table>
                                <tr>
                                <td colspan="4">
                                <a href="">Frankreich</a>
                                <a href="">Großbritanien</a>
        </td>
    </tr>
                                <tr>
                                <td>
            Uhrzeit
        </td>
                                <td colspan="3">
            Land
        </td>

</tr>
                                <tr>
                                <td>
            15:12
        </td>
                                <td>
            Berlin
        </td>
                                <td>
            MESZ
        </td>
                                <td>
            Deutschland
        </td>
    </tr>
                                <tr>
                                <td>
            14:12
        </td>
                                <td>
            London
        </td>
                                <td>
            -1h
        </td>
                                <td>
            Großbritanien
        </td>
    </tr>
</table>

Live Vorschau

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:

HTML

</tr>
                                <tr>
                                <td>
                                <p id="Time"></p>
        </td>
                                <td>
            Berlin
        </td>
                                <td>
            MESZ
        </td>
                                <td>
            Deutschland
        </td>
    </tr>
                                <tr>
                                <td>
            14:12
        </td>
                                <td>
            London
        </td>
                                <td>
            -1h
        </td>
                                <td>
            Großbritanien
        </td>
    </tr>
</table>

CSS

JavaScript

Live Vorschau

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. Für dieses einfache Einstiegsbeispiel lassen wir die Sommerzeit noch außer Acht, damit wir uns zuerst auf die Grundidee (UTC + fester Offset) konzentrieren können.
Weiter unten, wenn wir die einzelnen Länder als Objekte abbilden, lösen wir das Sommerzeit-Problem dann richtig.

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?:

HTML

CSS

JavaScript

// Erstelle eine Methode die den Unterschied zur UTC Zeit angibt
// Eingabeargument ist die Anzahl minuten um die die Zeit versetzt werden soll (offset_min)
// Ganz unten muss der Aufruf der Methode geändert werden um eine andere Umrechnung anzugeben. Bsp. SetTime_ByOffset_Min(-120) oder SetTime_ByOffset_Min(180)
function SetTime_ByOffset_Min(offset_min) {
  // Neues Datum Objekt erstellen
  var date = new Date();

// date.getTime() liefert bereits den absoluten Zeitstempel in Millisekunden (immer UTC) -
  // ein Umweg über getUTCHours()/setHours() ist nicht nötig (und war fehleranfällig).
  var utcDateTime = date.getTime();
  var offSetToBeAdded = offset_min * 60000; // Offset is minutes (60 or 120) multiple with 60 (1 Minute = 60 secs) and with 1.000 (1 sec = 1.000 msec) or simply with 60.000 to get milliseconds
  // Die Offset Zeit zur UTC Zeit hinzufügen
  var regionTime = utcDateTime + offSetToBeAdded; // add
  // Ein neues Date Objekt erstellen
  var regionDate = new Date(regionTime);

// Zeit ausgeben
  document.getElementById("Time").innerHTML = regionDate.toLocaleTimeString();

document.getElementById("offset").innerHTML = offset_min;

// Reine UTC-Uhrzeit anzeigen, ohne Umrechnung
  document.getElementById("utcTime").innerHTML = date.toLocaleTimeString("de-DE", { timeZone: "UTC" });

var currentTime = new Date();
  document.getElementById(
    "currentTime"
  ).innerHTML = currentTime.toLocaleTimeString();
}

// Aufrufen der Methode
SetTime_ByOffset_Min(120);

Live Vorschau

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":

JavaScript

// Aufrufen der Methode
    SetTime_ByOffset_Min(120);

Ändert dies zu

JavaScript


    // 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:

HTML

<table>
                                <tr>
                                <td colspan="4">
                                <a>Frankreich</a>
                                <a>Großbritanien</a>
    </td>
  </tr>
                                <tr>
                                <td>
      Uhrzeit
    </td>
                                <td colspan="3">
      Land
    </td>

</tr>
                                <tr>
                                <td>
                                <label id="currentTime"></label>
    </td>
                                <td>
      Berlin
    </td>
                                <td>
      MESZ
    </td>
                                <td>
      Deutschland
    </td>
  </tr>
                                <tr>
                                <td>
                                <label id="Time"></label>
    </td>
                                <td>
      London
    </td>
                                <td>
      -1h
    </td>
                                <td>
      Großbritanien
    </td>
  </tr>
</table>
<p> Versatz (Offset): <label id="offset"></label> </p>
<p> UTC Zeit: <label id="utcTime"></label> </p>

CSS

JavaScript

var offset_min = 120;

// Erstelle eine Methode die den Unterschied zur UTC Zeit angibt
function SetTime_ByOffset_Min() {
  // Neues Datum Objekt erstellen
  var date = new Date();

// Zeit ausgeben
  document.getElementById("Time").innerHTML = regionDate.toLocaleTimeString();

document.getElementById("offset").innerHTML = offset_min;

// Reine UTC-Uhrzeit anzeigen, ohne Umrechnung
  document.getElementById("utcTime").innerHTML = date.toLocaleTimeString("de-DE", { timeZone: "UTC" });

var currentTime = new Date();
  document.getElementById(
    "currentTime"
  ).innerHTML = currentTime.toLocaleTimeString();

setTimeout(SetTime_ByOffset_Min, 1000);
}

// Aufrufen der Methode
SetTime_ByOffset_Min();

Live Vorschau

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:

HTML

CSS

JavaScript

Live Vorschau

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 geben wir hier nur # als Platzhalter an. Stattdessen soll beim "OnClick" die Javascript Methode "ClickEventMethode" aufgerufen werden:

JavaScript

<a href="#" onclick="ClickEventMethode('gb'); return false;">Großbritanien</a>

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

JavaScript

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

Hinweis: Die Werte in der Tabelle gelten nur für die Winterzeit. Im Sommer (Sommerzeit/DST) verschieben sich alle drei Zeitzonen um eine weitere Stunde, z. B. wird aus "gb: 0" dann "gb: +1". Warum ein fester Zahlenwert dafür nicht ausreicht, erkläre ich gleich im Anschluss.

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

Wichtig: Warum ein fester Zeitversatz nicht funktioniert

Die Tabelle oben zeigt für jedes Land nur einen festen Zeitversatz zur UTC-Zeit (z. B. "gb: 0", "fr: 60"). Das Problem: Diese Werte gelten nur für die Winterzeit (Standardzeit). Fast alle hier gezeigten Länder (Großbritannien, Frankreich, Deutschland, die USA, ...) stellen im Frühjahr die Uhr eine Stunde vor (Sommerzeit) und im Herbst wieder zurück. Das Datum, an dem das passiert, ist außerdem nicht überall gleich, und manche Länder (z. B. China) haben gar keine Sommerzeit.

Ein einziger, fest in den Code geschriebener Zahlenwert kann das nicht abbilden — er ist automatisch zweimal im Jahr falsch, sobald sich irgendwo die Sommer-/Winterzeit ändert. Genau das war der Grund, warum die Uhrzeit für Großbritannien auf dieser Seite eine Zeit lang falsch angezeigt wurde: Der Code ging fest von "UTC+0" für Großbritannien aus, ignorierte aber, dass dort im Sommer "UTC+1" (British Summer Time) gilt.

Die robuste Lösung: Statt einen Offset selbst zu berechnen, fragen wir den Browser über die eingebaute

Intl.DateTimeFormat

-Funktion nach der Uhrzeit in einer bestimmten Zeitzone — angegeben über ihren offiziellen Namen (z. B.

"Europe/London"

). Diese Zeitzonen-Namen (sogenannte "IANA-Zeitzonen") sind im Browser hinterlegt und enthalten bereits alle Regeln dazu, wann und ob in dieser Zeitzone auf Sommerzeit umgestellt wird. Damit müssen wir selbst gar nicht mehr wissen, ob und wie viel Sommerzeit gerade gilt — der Browser rechnet das für uns korrekt aus.

Ab dem übernächsten Beispiel (mit den Javascript-Objekten) verwenden wir daher statt

offset

ein Feld

timeZone

mit so einem Zeitzonen-Namen, und statt der manuellen Offset-Rechnung nutzen wir

Intl.DateTimeFormat

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:

HTML

CSS

JavaScript

function ClickEventMethode_Timeout(){
    ClickEventMethode(document.getElementById("hiddenRegion").value);
    setTimeout(ClickEventMethode_Timeout, 500);
}

ClickEventMethode('de');
ClickEventMethode_Timeout();

Live Vorschau

2. Implementierung mittels Javascript Objekten

HTML

CSS

JavaScript

const regions = [

{
		region: "gb", timeZone: "Europe/London", country: "Großbritannien", city: "London", flagpicture: "gb.png"
	},
	{
		region: "fr", timeZone: "Europe/Paris", country: "Frankreich", city: "Paris", flagpicture: "fr.png"
	}
  ,
	{
		region: "de", timeZone: "Europe/Berlin", country: "Deutschland", city: "Berlin", flagpicture: "de.png"
	}
];

// Gibt das passende region Objekt zur angegebenen Region zurück
function GetRegionObj(region) {
	for (let r of regions) {
		if (r.region == region)
			return r;
	}
}

function SetTime_SelectedRegion(region) {

var r = GetRegionObj(region);

// Intl.DateTimeFormat kennt den aktuell gültigen Offset (inkl. Sommerzeit) zu jeder Zeitzone
	var offsetFormatter = new Intl.DateTimeFormat("de-DE", { timeZone: r.timeZone, timeZoneName: "shortOffset" });
	var offsetPart = offsetFormatter.formatToParts(new Date()).find(function (p) { return p.type === "timeZoneName"; });

document.getElementById("clicked").innerHTML = r.region;
    document.getElementById("timezone").innerHTML = r.timeZone;
    document.getElementById("offset").innerHTML = offsetPart ? offsetPart.value : "";
    document.getElementById("country").innerHTML = r.country;
    document.getElementById("city").innerHTML = r.city;
}

function ClickEventMethode(region)
{
  SetTime_SelectedRegion(region);
}

function ClickEventMethode_Timeout(){
    
    ClickEventMethode(document.getElementById("hiddenRegion").value);
    setTimeout(ClickEventMethode_Timeout, 500);
}

ClickEventMethode('de');
ClickEventMethode_Timeout();

Live Vorschau

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:

HTML

<table>
                                <tr>
                                <td colspan="4">
                                <a href="#" onclick="ClickEventMethode('fr'); return false;">Frankreich</a><br />
                                <a href="#" onclick="ClickEventMethode('gb'); return false;">Großbritanien</a>
                                    </td>
    </tr>
                                <tr>
                                <td>
            Uhrzeit
        </td>
                                <td colspan="3">
            Land
        </td>

</tr>
                                <tr>
                                <td>
                                <label id="currentTime"></label>
        </td>
                                <td>
            Berlin
        </td>
                                <td>
            MESZ
        </td>
                                <td>
            Deutschland
        </td>
    </tr>
                                <tr>
                                <td>
                                <label id="selectedRegion_Time"></label>
        </td>
                                <td>
                                <label id="selectedRegion_City"></label>
        </td>
                                <td>
                                <label id="selectedRegion_Offset"></label>
        </td>
                                <td>
                                <label id="selectedRegion_Country"></label>
        </td>
    </tr>
</table>
<input type="hidden" id="hiddenRegion" value="gb" />
<script>
    function ClickEventMethode(region) {
        document.getElementById("hiddenRegion").value = region;
    }
</script>

CSS

JavaScript

// Unsere Javascript Objekte mit den Informationen der Regionen und zur dortigen Uhrzeit
const regions = [
	{
		region: "gb", timeZone: "Europe/London", country: "Großbritannien", city: "London", flagpicture: "gb.png"
	},
	{
		region: "fr", timeZone: "Europe/Paris", country: "Frankreich", city: "Paris", flagpicture: "fr.png"
	}
  ,
	{
		region: "de", timeZone: "Europe/Berlin", country: "Deutschland", city: "Berlin", flagpicture: "de.png"
	}
];

function SetTime_SelectedRegion(selectedRegion) {

var date = new Date();
	var r = GetRegionObj(selectedRegion);

// Intl.DateTimeFormat rechnet direkt in die Ziel-Zeitzone um (inkl. der dort gültigen Sommer-/Winterzeit)
	var timeFormatter = new Intl.DateTimeFormat("de-DE", { timeZone: r.timeZone, hour: "2-digit", minute: "2-digit", second: "2-digit" });
	var offsetFormatter = new Intl.DateTimeFormat("de-DE", { timeZone: r.timeZone, timeZoneName: "shortOffset" });
	var offsetPart = offsetFormatter.formatToParts(date).find(function (p) { return p.type === "timeZoneName"; });

document.getElementById("selectedRegion_Time").innerHTML = timeFormatter.format(date);
	document.getElementById("selectedRegion_City").innerHTML = r.country + " (" + r.city + ")";
	document.getElementById("selectedRegion_Offset").innerHTML = offsetPart ? offsetPart.value : "";
	document.getElementById("selectedRegion_Country").innerHTML = r.country;
}

function GetRegionObj(region) {
	for (let r of regions) {
		if (r.region == region)
			return r;
	}
}

function ClickEventMethode(region)
{
 
  SetTime_SelectedRegion(region);
}

function ClickEventMethode_Timeout(){
    ClickEventMethode(document.getElementById("hiddenRegion").value);
    setTimeout(ClickEventMethode_Timeout, 500);
}

var offset_min = 120;

// Erstelle eine Methode die den Unterschied zur UTC Zeit angibt
function SetTime_ByOffset_Min() {
  
  var currentTime = new Date();
  document.getElementById(
    "currentTime"
  ).innerHTML = currentTime.toLocaleTimeString();

setTimeout(SetTime_ByOffset_Min, 1000);
}

// Aufrufen der Methode
SetTime_ByOffset_Min();

ClickEventMethode_Timeout();

Live Vorschau

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:

HTML

CSS

JavaScript

// Globale Variablen
var date;
var selectedRegion  = 'gb';

function ClickEventMethode()
{
  selectedRegion = document.getElementById("hiddenRegion").value;
  SetTime_SelectedRegion();
}

function SetTime_SelectedRegion() {
  // globale Variable nutzen, statt uebergebene Variable
		var r = GetRegionObj(selectedRegion);
  date = new Date();

// Uhrzeit des Systems setzen (Germany)
  var currentTime = new Date();
  document.getElementById(
    "currentTime"
  ).innerHTML = currentTime.toLocaleTimeString();

// Methode regelmaessig automatisch wieder aufrufen
  setTimeout(ClickEventMethode, 100);
}

// Hilfsmethode um das Objekt anhand der region als string zu ermitteln
function GetRegionObj(region) {
	for (let r of regions) {
		if (r.region == region)
			return r;
	}
}

SetTime_SelectedRegion();

Live Vorschau

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:

HTML

<table>
                                <tr>
                                <td colspan="4">
                                <a href="#" onclick="ClickEventMethode('us'); return false;">United States</a>
                                <a href="#" onclick="ClickEventMethode('gb'); return false;">Großbritanien</a>
                                <a href="#" onclick="ClickEventMethode('fr'); return false;">Frankreich</a>
                                <a href="#" onclick="ClickEventMethode('ua'); return false;">Ukraine</a>
                                <a href="#" onclick="ClickEventMethode('mg'); return false;">Madagaskar</a>
                                <a href="#" onclick="ClickEventMethode('au'); return false;">Australien</a>
                                <a href="#" onclick="ClickEventMethode('nz'); return false;">Neuseeland</a>
                                    </td>
    </tr>
                                <tr>
                                <td>
            Uhrzeit
        </td>
                                <td colspan="3">
            Land
        </td>

</tr>
                                <tr>
                                <td>
                                <label id="currentTime"></label>
        </td>
                                <td>
            Berlin
        </td>
                                <td>
            MESZ
        </td>
                                <td>
            Deutschland
        </td>
    </tr>
                                <tr>
                                <td>
                                <label id="selectedRegion_Time"></label>
        </td>
                                <td>
                                <label id="selectedRegion_City"></label>
        </td>
                                <td>
                                <label id="selectedRegion_Offset"></label>
        </td>
                                <td>
                                <label id="selectedRegion_Country"></label>
        </td>
    </tr>
</table><input type="hidden" id="hiddenRegion" value="gb" />
<script>
    function ClickEventMethode(region) {
        document.getElementById("hiddenRegion").value = region;
    }
</script>

CSS

JavaScript

// Unsere Javascript Objekte mit den Informationen der Regionen und zur dortigen Uhrzeit
const regions = [
	{
		region: "us", timeZone: "America/New_York", country: "United States", city: "New York", flagpicture: "us.png"
	},
	{
		region: "gb", timeZone: "Europe/London", country: "Großbritannien", city: "London", flagpicture: "gb.png"
	},
	{
		region: "fr", timeZone: "Europe/Paris", country: "Frankreich", city: "Paris", flagpicture: "fr.png"
	},
	{
		region: "ua", timeZone: "Europe/Kyiv", country: "Ukraine", city: "Kiew", flagpicture: "ua.png"
	}
	,
	{
		region: "mg", timeZone: "Indian/Antananarivo", country: "Madagaskar", city: "Antananarivo", flagpicture: "mg.png"
	},
	{
		region: "cn", timeZone: "Asia/Shanghai", country: "China", city: "Peking", flagpicture: "cn.png"
	}
	,
	{
		region: "au", timeZone: "Australia/Sydney", country: "Australien", city: "Sidney", flagpicture: "au.png"
	},
	{
		region: "nz", timeZone: "Pacific/Auckland", country: "Neuseeland", city: "Wellington", flagpicture: "nz.png"
	}
];

// Globale Variablen
var date;
var selectedRegion  = 'gb';

function ClickEventMethode()
{
  selectedRegion = document.getElementById("hiddenRegion").value;
  SetTime_SelectedRegion();
}

function SetTime_SelectedRegion() {
  // globale Variable nutzen, statt uebergebene Variable
		var r = GetRegionObj(selectedRegion);
  date = new Date();

// Uhrzeit des Systems setzen (Germany)
  var currentTime = new Date();
  document.getElementById(
    "currentTime"
  ).innerHTML = currentTime.toLocaleTimeString();

// Methode regelmaessig automatisch wieder aufrufen
  setTimeout(ClickEventMethode, 100);
}

// Hilfsmethode um das Objekt anhand der region als string zu ermitteln
function GetRegionObj(region) {
	for (let r of regions) {
		if (r.region == region)
			return r;
	}
}

SetTime_SelectedRegion();

Live Vorschau

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:

HTML

</td>
                                <td class="td_Country">
                                <div id="selectedRegion_Offset"></div>

</td>
                                <td class="td_Country">
                                <label id="selectedRegion_Country"></label>
                                    </td>
                                </tr>
                            </table>
<input type="hidden" id="hiddenRegion" value="gb" />
<script>
    function ClickEventMethode(region) {
        document.getElementById("hiddenRegion").value = region;
    }
</script>

CSS

JavaScript

// Globale Variablen
var date;
var selectedRegion  = 'gb';

function ClickEventMethode()
{
  selectedRegion = document.getElementById("hiddenRegion").value;
  SetTime_SelectedRegion();
}

function SetTime_SelectedRegion() {
  // globale Variable nutzen, statt uebergebene Variable
		var r = GetRegionObj(selectedRegion);
  date = new Date();

// Uhrzeit des Systems setzen (Germany)
  var currentTime = new Date();
  document.getElementById(
    "germany_Time"
  ).innerHTML = currentTime.toLocaleTimeString();

// Methode regelmaessig automatisch wieder aufrufen
  setTimeout(ClickEventMethode, 100);
}

// Hilfsmethode um das Objekt anhand der region als string zu ermitteln
function GetRegionObj(region) {
	for (let r of regions) {
		if (r.region == region)
			return r;
	}
}

SetTime_SelectedRegion();

Live Vorschau

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

HTML

</td>
                                <td class="td_Country">
                                <div id="selectedRegion_Offset"></div>

CSS

JavaScript

// Globale Variablen
var date;
var selectedRegion  = 'gb';

function ClickEventMethode()
{
  selectedRegion = document.getElementById("hiddenRegion").value;
  SetTime_SelectedRegion();
}

function SetTime_SelectedRegion() {
  // globale Variable nutzen, statt uebergebene Variable
		var r = GetRegionObj(selectedRegion);
  date = new Date();

// Uhrzeit des Systems setzen (Germany)
  var currentTime = new Date();
  document.getElementById(
    "germany_Time"
  ).innerHTML = currentTime.toLocaleTimeString();

// Methode regelmaessig automatisch wieder aufrufen
  setTimeout(ClickEventMethode, 100);
}

// Hilfsmethode um das Objekt anhand der region als string zu ermitteln
function GetRegionObj(region) {
	for (let r of regions) {
		if (r.region == region)
			return r;
	}
}

SetTime_SelectedRegion();

Live Vorschau

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):

HTML

<table class="t_Country">
                                <tr class="tr_Country">
                                <td colspan="4" class="td_Country" style="text-align:center; background-color:antiquewhite; border-bottom:3px solid black;">
                                <a href="#" onclick="ClickEventMethode('us'); return false;" style="padding-right:2px; "><img src="https://uhrprogrammieren.com/images/WatchWorld/flags_h20/us.png" alt="United States" /></a>
                                <a href="#" onclick="ClickEventMethode('gb'); return false;" style="padding-right:2px"><img src="https://uhrprogrammieren.com/images/WatchWorld/flags_h20/gb.png" alt="Großbritanien" /></a>
                                <a href="#" onclick="ClickEventMethode('fr'); return false;" style="padding-right:2px"><img src="https://uhrprogrammieren.com/images/WatchWorld/flags_h20/fr.png" alt="Frankreich" /></a>
                                <a href="#" onclick="ClickEventMethode('ua'); return false;" style="padding-right:2px"><img src="https://uhrprogrammieren.com/images/WatchWorld/flags_h20/ua.png" alt="Ukraine" /></a>
                                <a href="#" onclick="ClickEventMethode('mg'); return false;" style="padding-right:2px"><img src="https://uhrprogrammieren.com/images/WatchWorld/flags_h20/mg.png" alt="Madagaskar" /></a>
                                <a href="#" onclick="ClickEventMethode('cn'); return false;" style="padding-right: 2px"><img src="https://uhrprogrammieren.com/images/WatchWorld/flags_h20/cn.png" alt="China" /></a>
                                <a href="#" onclick="ClickEventMethode('au'); return false;" style="padding-right:2px"><img src="https://uhrprogrammieren.com/images/WatchWorld/flags_h20/au.png" alt="Australien" /></a>
                                <a href="#" onclick="ClickEventMethode('nz'); return false;" style="padding-right: 2px"><img src="https://uhrprogrammieren.com/images/WatchWorld/flags_h20/nz.png" alt="Neuseeland" /></a>
                                    </td>
                                </tr>
                                <tr class="tr_Country">
                                <td class="td_Country">
                                <div id="germany_Time"></div>
                                    </td>
                                <td class="td_Country">
                                        Deutschland (Berlin)
                                    </td>
                                <td class="td_Country">
                                        UTC+1/MESZ
                                    </td>
                                <td class="td_Country">
                                <img src="https://uhrprogrammieren.com/images/WatchWorld/flags_h20/de.png" alt="Deutschland" />
                                    </td>
                                </tr>
                                <tr class="tr_Country">
                                <td class="td_Country">
                                <div id="selectedRegion_Time"></div>
                                    </td>
                                <td class="td_Country" style="width:50%">
                                <div id="selectedRegion_City"></div>

</td>
                                <td class="td_Country">
                                <div id="selectedRegion_Offset"></div>

</td>
                                <td class="td_Country">
                                <img src="https://uhrprogrammieren.com/images/WatchWorld/flags_h20/gb.png" alt="Großbritanien" id="selectedRegion_Image" />
                                    </td>
                                </tr>
                            </table>  
<input type="hidden" id="hiddenRegion" value="gb" />
<script>
    function ClickEventMethode(region) {
        document.getElementById("hiddenRegion").value = region;
    }
</script>

CSS

JavaScript

// Globale Variablen
var date;
var selectedRegion  = 'gb';

function ClickEventMethode()
{
  selectedRegion = document.getElementById("hiddenRegion").value;
  SetTime_SelectedRegion();
}

function SetTime_SelectedRegion() {
  // globale Variable nutzen, statt uebergebene Variable
		var r = GetRegionObj(selectedRegion);
  date = new Date();

// Intl.DateTimeFormat rechnet direkt in die Ziel-Zeitzone um (inkl. der dort gültigen Sommer-/Winterzeit) -
	// genau das war vorher der Fehler: ein fest einprogrammierter Offset kennt keine Sommerzeit.
	var timeFormatter = new Intl.DateTimeFormat("de-DE", { timeZone: r.timeZone, hour: "2-digit", minute: "2-digit", second: "2-digit" });
	var offsetFormatter = new Intl.DateTimeFormat("de-DE", { timeZone: r.timeZone, timeZoneName: "shortOffset" });
	var offsetPart = offsetFormatter.formatToParts(date).find(function (p) { return p.type === "timeZoneName"; });

document.getElementById("selectedRegion_Image").src = "https://uhrprogrammieren.com/images/WatchWorld/flags_h20/" + r.flagpicture;

document.getElementById("selectedRegion_Image").alt = r.country;

// Uhrzeit des Systems setzen (Germany) - ebenfalls über die feste Zeitzone "Europe/Berlin", nicht über die Browser-Zeitzone
  var germanyFormatter = new Intl.DateTimeFormat("de-DE", { timeZone: "Europe/Berlin", hour: "2-digit", minute: "2-digit", second: "2-digit" });
  document.getElementById("germany_Time").innerHTML = germanyFormatter.format(date);

// Methode regelmaessig automatisch wieder aufrufen
  setTimeout(ClickEventMethode, 100);
}

// Hilfsmethode um das Objekt anhand der region als string zu ermitteln
function GetRegionObj(region) {
	for (let r of regions) {
		if (r.region == region)
			return r;
	}
}

SetTime_SelectedRegion();

Live Vorschau

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. Wenn ihr auch wissen möchtet, wie das funktioniert, dann schau es dir gerne hier an: Countdown-Timer programmieren.

Weltzeit Uhr

Eine Uhr mit verschiedenen Zeitzonen programmieren

Weltzeit Uhr

Eine Uhr mit verschiedenen Zeitzonen

Der Quellcode