Weltzeit Javascript mit UTC

Hinweis: Kauflinks verweisen auf Ebay- oder Amazon-Angebote, die mir eine kleine Provision bezahlen, um meinen Kanal/Website zu unterstützen.

Ich stelle hier eine Weltzeit App kostenlos zur Verfügung, die für 24 bekannte Orte in der Welt die aktuelle Ortszeit, das Datum der gewählten Zeitzone und die UTC Zeit anzeigt. Außerdem werden die aktuellen Bedingungen für Kurzwelle und VHF angezeigt, die durch die Sonnenaktivität beeinflusst werden (von hamqsl.com)

► Weltzeit Tool online ... UTC mobil (ohne Vorhersage)

Ihr könnt das Aussehen selbst nach eurem Geschmack anpassen und als Website aufrufen oder in eure Homepage einbinden. Wenn ihr das Script für Kurzwelle nicht mögt, löscht es einfach heraus. Es kann auf dem Smartphone wegen der Breite nur quer gut angesehen werde...

Farbwähler mit Hexadezimal Code ► Color Picker

Solarer Einfluss auf Kurzwelle Funk (fertige Scripte) ► hamqsl.com

Code

<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Weltzeituhr mit UTC</title>
<!-- Script von wanderlinse.de (Richy Schley) kostenlos zur Verfügung gestellt -->
<style>
  body {
    padding: 0px;
  }
  #container {
    font-family: Arial, sans-serif;
    text-align: center;
    background-color: #add0fc;
    border: 4px solid #404040;
    border-radius: 10px;
    padding: 20px;
    width: 100%;
    max-width: 460px;
    margin: auto;
  }
</style>
</head>
<body>
<div id="container">
<select id="cities">
  <option value="America/Los_Angeles">Los Angeles, USA (UTC-8)</option>
  <option value="America/Toronto">Toronto, Kanada (UTC-5)</option>
  <option value="America/Chicago">Chicago, USA (UTC-6)</option>
  <option value="America/New_York">New York, USA (UTC-5)</option>
  <option value="America/Mexico_City">Mexiko-Stadt, Mexiko (UTC-6)</option>
  <option value="America/Buenos_Aires">Buenos Aires, Argentinien (UTC-3)</option>
  <option value="America/Lima">Lima, Peru (UTC-5)</option>
  <option value="Europe/London">London, Vereinigtes Königreich (UTC)</option>
  <option value="Europe/Berlin" selected>Berlin, Deutschland (UTC+1)</option>
  <option value="Europe/Paris">Paris, Frankreich (UTC+1)</option>
  <option value="Europe/Moscow">Moskau, Russland (UTC+3)</option>
  <option value="Africa/Cairo">Kairo, Ägypten (UTC+2)</option>
  <option value="Asia/Dubai">Dubai, Vereinigte Arabische Emirate (UTC+4)</option>
  <option value="Asia/Tokyo">Tokio, Japan (UTC+9)</option>
  <option value="Asia/Hong_Kong">Hongkong (UTC+8)</option>
  <option value="Asia/Shanghai">Shanghai, China (UTC+8)</option>
  <option value="Asia/Seoul">Seoul, Südkorea (UTC+9)</option>
  <option value="Asia/Kolkata">Mumbai, Indien (UTC+5.5)</option>
  <option value="Asia/Singapore">Singapur (UTC+8)</option>
  <option value="Asia/Bangkok">Bangkok, Thailand (UTC+7)</option>
  <option value="Australia/Sydney">Sydney, Australien (UTC+11)</option>
  <option value="Australia/Melbourne">Melbourne, Australien (UTC+11)</option>
  <option value="Pacific/Auckland">Auckland, Neuseeland (UTC+13)</option>
</select>
<br /><br />
<div id="utc-time" style="font-size: 30px;"></div>
<br />
<div id="local-time" style="font-size: 18px; font-weight: bold;"></div>
<br />
<div id="current-date" style="font-size: 18px;"></div>
<br />
Von <a href="https://www.wanderlinse.de" target="_blank">Wanderlinse</a> ► <a href="https://www.short-wave.info" target="_blank">Kurzwelle Frequenzen</a>
<br /><br />
<!-- Anzeige der Kurzwelle Bedingungen kann man auch löschen -->
<a href="https://www.hamqsl.com/solar.html" title="Click to add Solar-Terrestrial Data to your website!"><img src="https://www.hamqsl.com/solar101vhf.php"></a>
</div>
<script>
function updateClock() {
  var selectedCity = document.getElementById("cities").value;
  var now = new Date();
  // UTC Zeit aktualisieren
  var utcTime = now.toISOString().split('T')[1].substring(0, 8);
  document.getElementById("utc-time").textContent = "UTC: " + utcTime;
  // Ortszeit aktualisieren
  var localTime = now.toLocaleTimeString('de-DE', {timeZone: selectedCity});
  document.getElementById("local-time").textContent = "Ortszeit: " + localTime;
  // Datum aktualisieren
  var currentDate = now.toLocaleDateString('de-DE', {timeZone: selectedCity});
  document.getElementById("current-date").textContent = "Datum: " + currentDate;
}
// Aktualisierung der Uhr
updateClock();
// Uhrzeit jede Sekunde aktualisieren
setInterval(updateClock, 1000);
</script>
</body>
</html>

Am einfachsten ist den gesamten Code zu kopieren und in eine Textdatei (UTF-8) einzufügen und als weltzeit.html zu speichern. Dann entweder lokal im PC aufrufen oder auf euren Server laden und dann mit dem Dateinamen "weltzeit.html" aufrufen.

Wer sich auskennt und nur Teile des Scriptes in seine Website einpflegen möchte kann dies auch gerne tun, solange die Hinweise auf den Urheber erhalten bleiben.