JavaScripts › Datum & Uhrzeit

Digitaluhr

Zeigt die laufende Uhrzeit in großen Ziffern — mit Wochentag, Datum und wahlweise im 12- oder 24-Stunden-Format.

Eine Uhr auf der eigenen Seite ist der Klassiker unter den kleinen Scripten — und im Archiv gab es bisher nur analoge. Diese hier zeigt die Zeit in Ziffern, dazu Wochentag und Datum, und sie läuft sekundengenau. Die Zeit kommt dabei nicht von einem Server, sondern aus der Uhr des Geräts, auf dem die Seite gerade angezeigt wird. Ein Besucher in Wien sieht also seine Ortszeit, ein Besucher in Tokio seine.

Genau darin liegt der Reiz und zugleich die Einschränkung: Die Uhr ist immer nur so genau wie die Systemuhr des Besuchers. Für eine Seite, auf der die exakte Zeit zählt — Auktionsende, Anmeldeschluss —, taugt sie deshalb nicht; dort muss der Server die Zeit liefern. Als Zierde, als Ergänzung zu Öffnungszeiten oder schlicht als Blickfang ist sie genau richtig.

Über die Auswahlfelder stellt ihr ein, ob die Sekunden mitlaufen und ob im 24-Stunden- oder im 12-Stunden-Format mit „vorm." und „nachm." angezeigt wird. Alle Bezeichnungen — Wochentage, Monate — holt sich das Script vom Browser und stimmen deshalb automatisch mit der eingestellten Sprache überein.

Verwandtes im Archiv: die analoge Uhr mit Zeigern, die Weltzeituhr für mehrere Zeitzonen und der Kalender. Wer die Uhrzeit lieber ausgeschrieben mag, findet nebenan Uhrzeit in Worten.

Datum & Uhrzeit Baujahr 2026 läuft in deinem Browser
--:--:--

Die Zeit stammt aus der Uhr eures Geräts, nicht von unserem Server.

Script von kostenlose-javascripts.de

So funktioniert das Script

Eine laufende Uhr braucht zwei Dinge: eine Funktion, die die aktuelle Zeit ausliest und darstellt, und einen Taktgeber, der sie regelmäßig aufruft. Beides ist kurz — die Feinheiten stecken in der Formatierung.

const jetzt = new Date();

new Date() ohne Argument liefert den aktuellen Zeitpunkt. Wichtig ist, dass diese Zeile innerhalb der Funktion steht und nicht davor: Ein Date-Objekt ist eine Momentaufnahme und läuft nicht von selbst weiter. Stünde es außerhalb, zeigte die Uhr für immer die Sekunde an, in der die Seite geladen wurde — ein Fehler, den jeder einmal macht.

setInterval(ticken, 1000);

setInterval ruft die Funktion alle 1000 Millisekunden auf, also jede Sekunde. Der zusätzliche Aufruf von ticken() direkt darüber ist kein Versehen: Ohne ihn stünde die Uhr eine ganze Sekunde lang auf ihrem Startwert, bevor sie das erste Mal aktualisiert wird. Anders als beim Lauftext ist setInterval hier die richtige Wahl — es geht nicht um flüssige Bewegung, sondern um einen festen Takt.

function zweistellig(zahl) {
  return String(zahl).padStart(2, "0");
}

Ohne diese Hilfsfunktion zeigte die Uhr „9:5:3" statt „09:05:03". getMinutes() liefert die Minute als Zahl, und Zahlen haben keine führenden Nullen. padStart füllt die Zeichenkette vorn auf die gewünschte Länge auf. In älteren Scripten sieht man dafür oft if (m < 10) m = "0" + m; — dasselbe Ergebnis, nur umständlicher.

anhang = stunden < 12 ? " vorm." : " nachm.";
stunden = stunden % 12;
if (stunden === 0) stunden = 12;

Die Umrechnung ins Zwölfstundenformat hat einen Sonderfall, den man leicht übersieht: Der Rest von 12 geteilt durch 12 ist null — und „0 Uhr nachm." wäre falsch, es muss „12 nachm." heißen. Dasselbe gilt für Mitternacht: 0 Uhr wird zu „12 vorm.". Deshalb die dritte Zeile. Beachtet außerdem, dass der Zusatz vor der Umrechnung bestimmt wird, denn danach ließe sich Vormittag und Nachmittag nicht mehr unterscheiden.

jetzt.toLocaleDateString("de-DE", {
  weekday: "long", day: "numeric", month: "long", year: "numeric"
});

Das Datum wird nicht von Hand zusammengesetzt, sondern vom Browser formatiert. toLocaleDateString kennt die Schreibgewohnheiten aller gängigen Sprachen — im Deutschen „Sonntag, 30. August 2026", im Englischen „Sunday, August 30, 2026". Die Angaben im Objekt bestimmen, welche Bestandteile erscheinen und wie ausführlich. Wer stattdessen ein Array mit den Monatsnamen anlegt, wie es in alten Scripten üblich war, bekommt dieselbe Ausgabe — aber nur in einer Sprache und mit dem Risiko, sich beim Abtippen zu vertun.

Zum Anpassen: Für die Zeit einer anderen Zeitzone gebt ihr sie bei toLocaleTimeString mit an, etwa { timeZone: "America/New_York" } — damit wird aus der Uhr eine kleine Weltzeituhr. Soll die Anzeige größer oder farbig sein, genügen Änderungen im Stylesheet; das Script selbst bleibt unberührt.

Script für die eigene Homepage

Kopiert euch den kompletten Code und fügt ihn an der Stelle eurer Seite ein, an der das Script erscheinen soll. Er läuft ohne weitere Dateien und ohne fremde Server.

Mehr aus der Kategorie Datum & Uhrzeit