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

Vielleicht fällt euch direkt auf, dass die Uhrzeit von Großbritannien nicht stimmt. Dies liegt daran, dass zur Sommerzeit die Uhrzeit nur eine Stunde unterschied hat. Zur Winterzeit aber 2h.
Hier muss ich noch daran arbeiten und den Fehler korrigieren.
Ich will euch diese Variante aber trotzdem nicht vorenthalten.
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. 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?:

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();
  // Aktuelle Stunde der UTZ Zeit ermitteln
  var utcDateHour = date.getUTCHours();

// Neues Datum mit der UTC Stunde erstellen
  var utcDate = new Date(date.setHours(utcDateHour));

// Die Millisekunden ermitteln
  var utcDateTime = utcDate.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
  // DieO ffset 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;

document.getElementById("utcTime").innerHTML = utcDate.toLocaleTimeString();

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();
  // Aktuelle Stunde der UTZ Zeit ermitteln
  var utcDateHour = date.getUTCHours();

// Neues Datum mit der UTC Stunde erstellen
  var utcDate = new Date(date.setHours(utcDateHour));

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

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

document.getElementById("utcTime").innerHTML = utcDate.toLocaleTimeString();

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

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:

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", offset: 0, offsetReadable: "00:00", country: "Großbritannien", city: "London", timezone: "UTC/GMT", flagpicture: "gb.png"
	},
	{
		region: "fr", offset: 60, offsetReadable: "+01:00", country: "Frankreich", city: "Paris", timezone: "UTC+1/MEZ", flagpicture: "fr.png"
	}
  ,
	{
		region: "de", offset: 60, offsetReadable: "+01:00", country: "Deutschland", city: "Berlin", timezone: "UTC+1/MEZ", 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);

document.getElementById("clicked").innerHTML = r.region;
    document.getElementById("timezone").innerHTML = r.timezone;
    document.getElementById("offset").innerHTML = r.offset;
    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", offset: 0, offsetReadable: "00:00", country: "Großbritannien", city: "London", timezone: "UTC/GMT", flagpicture: "gb.png"
	},
	{
		region: "fr", offset: 60, offsetReadable: "+01:00", country: "Frankreich", city: "Paris", timezone: "UTC+1/MEZ", flagpicture: "fr.png"
	}
  ,
	{
		region: "de", offset: 60, offsetReadable: "+01:00", country: "Deutschland", city: "Berlin", timezone: "UTC+1/MEZ", flagpicture: "de.png"
	}
];

function SetTime_SelectedRegion(selectedRegion) {

var date = new Date();
	var r = GetRegionObj(selectedRegion);
	var offset = r.offset;
	var utcDateHour = date.getUTCHours();

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);
	var offset = r.offset;
  date = new Date();
	var utcDateHour = date.getUTCHours();

var utcDate = new Date(date.setHours(utcDateHour));
	
	var utcDateTime = utcDate.getTime();
	var offSetToBeAdded = offset * 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
	var regionTime = utcDateTime + offSetToBeAdded; // add  
	var regionDate = new Date(regionTime);
	
	
	document.getElementById("selectedRegion_Time").innerHTML = regionDate.toLocaleTimeString();
	document.getElementById("selectedRegion_City").innerHTML = r.country + " (" + r.city + ")";
	document.getElementById("selectedRegion_Offset").innerHTML = r.timezone;
	document.getElementById("selectedRegion_Country").innerHTML = r.country;
  
  
  // 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", offset: -300, offsetReadable: "-05:00", country: "United States", city: "New York", timezone: "UTC-5", flagpicture: "us.png"
	},
	{
		region: "gb", offset: 0, offsetReadable: "00:00", country: "Großbritannien", city: "London", timezone: "UTC/GMT", flagpicture: "gb.png"
	},
	{
		region: "fr", offset: 60, offsetReadable: "+01:00", country: "Frankreich", city: "Paris", timezone: "UTC+1/MEZ", flagpicture: "fr.png"
	},
	{
		region: "ua", offset: 120, offsetReadable: "+02:00", country: "Ukraine", city: "Kiew", timezone: "UTC+2", flagpicture: "ua.png"
	}
	,
	{
		region: "mg", offset: 180, offsetReadable: "+03:00", country: "Madagaskar", city: "Antananarivo", timezone: "UTC+3", flagpicture: "mg.png"
	},
	{
		region: "cn", offset: 480, offsetReadable: "+8:00", country: "China", city: "Peking", timezone: "UTC+8", flagpicture: "cn.png"
	}
	,
	{
		region: "au", offset: 600, offsetReadable: "+10:00", country: "Australien", city: "Sidney", timezone: "UTC+10", flagpicture: "au.png"
	},
	{
		region: "nz", offset: 720, offsetReadable: "+12:00", country: "Neuseeland", city: "Wellington", timezone: "UTC+12", flagpicture: "nz.png"
	}
];

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

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

// 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();
}

var utcDate = new Date(date.setHours(utcDateHour));
	
	var utcDateTime = utcDate.getTime();
	var offSetToBeAdded = offset * 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
	var regionTime = utcDateTime + offSetToBeAdded; // add  
	var regionDate = new Date(regionTime);
	
	
	document.getElementById("selectedRegion_Time").innerHTML = regionDate.toLocaleTimeString();
	document.getElementById("selectedRegion_City").innerHTML = r.country + " (" + r.city + ")";
	document.getElementById("selectedRegion_Offset").innerHTML = r.timezone;
	document.getElementById("selectedRegion_Country").innerHTML = r.country;
  
  
  // 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();
}

var utcDate = new Date(date.setHours(utcDateHour));
	
	var utcDateTime = utcDate.getTime();
	var offSetToBeAdded = offset * 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
	var regionTime = utcDateTime + offSetToBeAdded; // add  
	var regionDate = new Date(regionTime);
	
	
	document.getElementById("selectedRegion_Time").innerHTML = regionDate.toLocaleTimeString();
	document.getElementById("selectedRegion_City").innerHTML = r.country + " (" + r.city + ")";
	document.getElementById("selectedRegion_Offset").innerHTML = r.timezone;
	document.getElementById("selectedRegion_Country").innerHTML = r.country;
  
  
  // 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();
}

var utcDate = new Date(date.setHours(utcDateHour));
	
	var utcDateTime = utcDate.getTime();
	var offSetToBeAdded = offset * 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
	var regionTime = utcDateTime + offSetToBeAdded; // add  
	var regionDate = new Date(regionTime);
	
	
	document.getElementById("selectedRegion_Time").innerHTML = regionDate.toLocaleTimeString();
	document.getElementById("selectedRegion_City").innerHTML = r.country + " (" + r.city + ")";
	document.getElementById("selectedRegion_Offset").innerHTML = r.timezone;
	
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)
  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

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 Juni 2026.

Weltzeit Uhr

Eine Uhr mit verschiedenen Zeitzonen programmieren

Weltzeit Uhr

Eine Uhr mit verschiedenen Zeitzonen

Der Quellcode