Eine Uhr auf der eigenen Homepage ist ein praktischer Zusatznutzen für Besucher. Sie zeigt die aktuelle Uhrzeit (und optional das Datum) direkt auf der Webseite an und kann je nach Umsetzung sogar verschiedene Zeitzonen oder die exakte Atomzeit darstellen. Besonders auf Informations‑, Service‑ oder internationalen Webseiten ist eine Homepage‑Uhr sinnvoll.
In diesem Beitrag erfährst du, wie du eine Uhr auf deiner Webseite einbindest, welche technischen Möglichkeiten es gibt und welche externen Anbieter sich dafür eignen.
Welche Möglichkeiten gibt es für eine Uhr auf der Homepage?
Grundsätzlich kannst du eine Uhr auf deiner Webseite auf drei Arten umsetzen:
- JavaScript‑Uhr – läuft im Browser des Besuchers
- PHP‑Uhr – wird serverseitig erzeugt
- Widgets & iFrames – externe Lösungen ohne Programmieraufwand
Im Folgenden stellen wir dir die gängigsten Varianten vor.
Uhrzeit mit JavaScript anzeigen
Mit JavaScript kannst du die aktuelle Uhrzeit dynamisch im Browser anzeigen lassen. Diese Methode ist besonders beliebt, da sie einfach umzusetzen ist und ohne Serverabfragen auskommt.
Die Uhrzeit basiert dabei auf der Systemzeit des Endgeräts des Besuchers. Für viele Anwendungsfälle ist das völlig ausreichend.
Vorteile:
- einfache Integration
- keine Serverlast
- flexibel gestaltbar (Farben, Schriftarten, Animationen)
Nachfolgend erhältst du zwei vollständig lauffähige JavaScript-Beispiele für Uhrzeit- und Datumsausgabe:
- Reiner Code (zum Einfügen in WordPress – Copy & Paste)
- Eingebundenes Beispiel (HTML + JavaScript)
Beide Varianten funktionieren ohne externe Bibliotheken, sind WordPress-kompatibel und können z. B. in einem HTML-Block, Custom-HTML-Widget oder im Theme verwendet werden.
1. JavaScript-Code – Uhrzeit & Datum (separat, sauber strukturiert)
JavaScript (z. B. im HTML-Block oder Footer)
<script>
function updateDateTime() {
const now = new Date();
const date = now.toLocaleDateString("de-DE", {
day: "2-digit",
month: "2-digit",
year: "numeric"
});
const time = now.toLocaleTimeString("de-DE", {
hour: "2-digit",
minute: "2-digit",
second: "2-digit"
});
document.getElementById("current-date").textContent = date;
document.getElementById("current-time").textContent = time;
}
// Initial ausführen
updateDateTime();
// Jede Sekunde aktualisieren
setInterval(updateDateTime, 1000);
</script>
HTML-Ausgabe (separat einfügen oder darüber platzieren)
<p>📅 Datum: <strong id="current-date"></strong></p>
<p>⏰ Uhrzeit: <strong id="current-time"></strong></p>
Einsatz in WordPress:
➡️ Gutenberg: „Individueller HTML“-Block
➡️ Classic Editor: Text-Tab, nicht visuell
2. Komplettes eingebundenes Beispiel (empfohlen für WordPress)
👉 Alles in einem Block kopieren und einfügen
<div style="font-family: Arial, sans-serif; font-size: 16px;">
<p>📅 <strong>Heutiges Datum:</strong> <span id="wp-date"></span></p>
<p>⏰ <strong>Aktuelle Uhrzeit:</strong> <span id="wp-time"></span></p>
</div>
<script>
function updateWPClock() {
const now = new Date();
const date = now.toLocaleDateString("de-DE");
const time = now.toLocaleTimeString("de-DE");
document.getElementById("wp-date").innerHTML = date;
document.getElementById("wp-time").innerHTML = time;
}
updateWPClock();
setInterval(updateWPClock, 1000);
</script>
Ergebnis auf der Webseite:
- Datum im deutschen Format (TT.MM.JJJJ)
- Uhrzeit mit Sekunden
- automatische Aktualisierung jede Sekunde
Optional: Styling anpassen (CSS)
Falls du Schriftgröße, Farbe oder Layout ändern möchtest:
<style>
#wp-date, #wp-time {
color: #2c3e50;
font-weight: bold;
}
</style>
Hinweise für WordPress (wichtig)
- Kein Plugin notwendig
- Funktioniert in:
- Beiträgen
- Seiten
- Widgets
- Page Buildern mit HTML-Element
- JavaScript läuft clientseitig (nutzt die Uhrzeit des Besuchers)
So sieht das Beispiel in WordPress fertig eingebunden aus:
📅 Heutiges Datum:
⏰ Aktuelle Uhrzeit:
Uhrzeit und Datum mit PHP ausgeben
Wenn dein Webspace PHP unterstützt, kannst du Datum und Uhrzeit auch serverseitig erzeugen. Diese Lösung ist besonders dann sinnvoll, wenn du eine einheitliche Zeit unabhängig vom Endgerät des Besuchers anzeigen möchtest.
Beispiel: Datum und Uhrzeit mit PHP
<?php
$datum = date("d.m.Y");
$uhrzeit = date("H:i:s");
echo $datum . " " . $uhrzeit;
?>
Vorteile:
- einheitliche Zeitangabe
- unabhängig von der Rechneruhr des Besuchers
- ideal für Log‑ oder Systemseiten
Externe Anbieter und Widgets für Homepage‑Uhren
Wenn du keine eigene Uhr programmieren möchtest, kannst du auf fertige Lösungen zurückgreifen. Die meisten Anbieter stellen kostenlose Uhren per JavaScript oder iFrame zur Verfügung, die sich oft farblich anpassen lassen.
Beliebte Anbieter für Uhren auf der Homepage
| Link | Beschreibung |
|---|---|
| https://www.coder-world.de/cw/seite__pagewebdesignmydatetime.html | Große Sammlung kostenloser JavaScript‑Skripte für Datum und Uhrzeit; werbefreie oder individuelle Skripte gegen geringe Gebühr |
| https://freefrontend.com/css-clocks/ | 32 CSS‑Uhren zur Inspiration |
| https://www.geovisite.com/de/ | Geo‑Dienste wie Geoclock, Geoweather oder Geocounter |
| https://www.mywebaid.de/index.shtml | Einfache JavaScript‑Lösungen für Datum und Uhrzeit |
| https://www.olimodo.com/uhr-homepage/ | Fertige Uhr‑Widgets für Webseiten |
| php-einfach.de/php-tutorial/php-datum-uhrzeit/ | Tutorials zur Datums‑ und Zeitausgabe mit PHP |
| https://www.schattenbaum.net/php/datum.php | PHP‑Beispiele für Datum und Uhrzeit |
| https://www.schnelle-online.info/Homepage/Uhr-fuer-die-Homepage.html | Uhr und Datum mit Atomzeit (Client‑Uhr dient nur als Taktgeber) |
| https://www.schulferien.org/Uhrzeit/uhrzeit_code.html | Atomuhr per iFrame einbinden |
| https://www.timeanddate.de/apps/uhr | Uhr-Widget für Deine Webseite |
| https://tutorialzine.com/2013/06/digital-clock | Moderne Digitaluhr mit jQuery und CSS |
| https://wiki.selfhtml.org/wiki/JavaScript/Objekte/Date/Uhr | Javascript-Uhr bei Selfhtml |
| https://www.zeitverschiebung.net/de/clock-widget | Kostenloses Uhr-Widget für die eigene Homepage / Webseite (HTML) |
Atomzeit oder lokale Uhrzeit – was ist besser?
Für viele Webseiten reicht eine lokale JavaScript‑Uhr völlig aus. Wenn du jedoch absolute Genauigkeit benötigst (z. B. bei Termin‑ oder Serviceangeboten), ist eine Atomzeit‑basierte Uhr die bessere Wahl. Diese greift auf offizielle Zeitserver zurück und ist unabhängig von falsch eingestellten Rechneruhren.
Fazit: Lohnt sich eine Uhr auf der eigenen Homepage?
Eine Uhr auf der Homepage ist kein Muss, kann aber:
- den Nutzwert deiner Webseite erhöhen,
- als Serviceelement Vertrauen schaffen,
- internationale Besucher bei der Orientierung unterstützen.
Ob du dich für JavaScript, PHP oder ein fertiges Widget entscheidest, hängt von deinem technischen Anspruch und dem gewünschten Funktionsumfang ab. Mit den hier vorgestellten Lösungen findest du für nahezu jedes Projekt die passende Homepage‑Uhr.