Weltzeituhr

So funktioniert das Script

Das Script hat drei Teile: eine Tabelle der Zeitzonen (als data-offset-Attribute direkt an den Knöpfen), eine Funktion anzeigen(), die die Uhrzeit der gewählten Zone berechnet und ausgibt, und die Verdrahtung der Knöpfe. Ein Zeitgeber sorgt dafür, dass die Anzeige jede Sekunde aktualisiert wird.

const zonenzeit = new Date(Date.now() + offset * 60000);

Das ist der Kern der ganzen Uhr. Date.now() liefert den aktuellen Zeitpunkt als Millisekunden-Zahl (den sogenannten Timestamp). Dazu wird der Versatz der gewählten Zone addiert: offset ist in Minuten angegeben, eine Minute hat 60 000 Millisekunden, daher die Multiplikation mit 60000. Aus der verschobenen Zahl entsteht ein neues Date-Objekt.

zeitFeld.textContent = zweistellig(zonenzeit.getUTCHours()) + ":" +
  zweistellig(zonenzeit.getUTCMinutes()) + ":" +
  zweistellig(zonenzeit.getUTCSeconds());

Wichtig ist hier, dass die getUTC…-Methoden benutzt werden statt getHours() & Co. Die normalen Methoden würden die Zeit noch einmal in die Zeitzone eures Rechners umrechnen — dann würde jeder Besucher etwas anderes sehen. Über UTC gelesen zeigt die verschobene Zeit dagegen bei allen dasselbe: die Uhrzeit der gewählten Weltzeitzone. Die Umrechnung von Tag, Monat und Jahr (Zeitzonen können ja auch das Datum kippen, Stichwort Datumsgrenze) erledigt das Date-Objekt dabei ganz von selbst.

function zweistellig(n) {
  return (n < 10 ? "0" : "") + n;
}

Eine kleine Kosmetik-Hilfsfunktion: Damit aus 9:5:3 ein ordentliches 09:05:03 wird, stellt sie einstelligen Zahlen eine führende Null voran. Der Fragezeichen-Operator bedingung ? a : b ist eine Kurzform für if/else: Ist n kleiner als 10, wird "0" vorangestellt, sonst ein leerer String.

document.querySelectorAll("#wz-knoepfe button").forEach(function (knopf) {
  knopf.addEventListener("click", function () {
    offset = Number(knopf.dataset.offset);
    zone = knopf.dataset.zone || knopf.textContent;
    anzeigen();
  });
});

querySelectorAll sammelt alle Knöpfe ein, und jeder bekommt per addEventListener einen Klick-Handler. Der Versatz steht als data-offset-Attribut direkt im HTML und ist über knopf.dataset.offset abrufbar — so braucht es keine lange if-Kette im Script. Als Zonenname dient die Beschriftung des Knopfs (textContent); nur wo ein längerer Name gewünscht ist, überschreibt ein data-zone-Attribut ihn (etwa „Atlantic Standard“). Das || bedeutet hier: Nimm data-zone, falls vorhanden, sonst die Knopfbeschriftung.

anzeigen();
setInterval(anzeigen, 1000);

Zum Schluss wird die Anzeige einmal sofort gefüllt und dann mit setInterval im Sekundentakt (1000 Millisekunden) aufgefrischt — so tickt die Uhr sichtbar weiter.

Zum Anpassen: Eine eigene Zeitzone ergänzt ihr einfach als weiteren Knopf im HTML, der Versatz in Minuten zur UTC kommt ins data-offset-Attribut — für Moskau (UTC +3) etwa data-offset="180", für Neufundland (UTC −3:30) data-offset="-210". Am Script selbst müsst ihr dafür nichts ändern.