JavaScripts › Datum & Uhrzeit

Analoge Uhr mit römischen Ziffern

Zeigt eine analoge Uhr mit römischem Ziffernblatt an — III, VI, IX und XII als Ziffern, der Rest als Punkte.

Dieses Javascript fügt auf eurer Homepage eine analoge Uhr mit römischem Ziffernblatt ein. Dabei werden nur die Positionen 3, 6, 9 und 12 als römische Ziffern (III, VI, IX, XII) dargestellt — die restlichen Stundenpositionen erscheinen als schlichte Punkte. Das wirkt aufgeräumter als ein voll beschriftetes Ziffernblatt und erinnert an klassische Wanduhren.

Die Demo läuft von selbst los und zeigt die Uhrzeit an, die auf dem Rechner des jeweiligen Besuchers eingestellt ist. Der längste Zeiger aus fünf Punkten ist der Sekundenzeiger, die kürzeren sind Minuten- und Stundenzeiger.

Die Uhr wird nicht als Bild gezeichnet, sondern besteht komplett aus einzelnen Textzeichen, die das Script mit Sinus und Kosinus auf Kreisbahnen platziert — ein charmanter Trick aus der Frühzeit des dynamischen HTML, den wir behutsam modernisiert haben.

Die Farben der Zeiger und des Ziffernblatts könnt ihr über die Variablen am Anfang des Scripts verstellen. Die passenden Farbwerte findet ihr bei unseren Farbcodes.

Dieselbe Uhr gibt es übrigens auch mit gewöhnlichen Ziffern von 1 bis 12: die analoge Uhr. Dort erklären wir das Script auch noch einmal ausführlich.

Datum & Uhrzeit Baujahr 2007 läuft in deinem Browser

Die Uhr zeigt die Uhrzeit an, die auf eurem Rechner eingestellt ist.

So funktioniert das Script

Das Script hat drei Teile: die Einstellungen am Anfang (Farben und Größe), den Aufbau der Uhr aus vielen kleinen <span>-Elementen und eine Zeichenfunktion, die im Halbsekundentakt die Position jedes Elements neu berechnet. Alles steckt in einer sofort ausgeführten Funktion, damit die Variablennamen nicht mit anderen Scripts kollidieren.

const face = ". . III . . VI . . IX . . XII".split(" ");

Diese eine Zeile macht aus der Uhr die römische Variante: split(" ") zerlegt die Zeichenkette an den Leerzeichen in zwölf Einträge — einen pro Stundenposition. An den Positionen 3, 6, 9 und 12 stehen die römischen Ziffern, überall sonst ein Punkt. Wer ein anderes Ziffernblatt möchte, tauscht einfach die Einträge aus; nur bei zwölf Stück sollte es bleiben, damit die Aufteilung stimmt.

const stunden = "...".split("");
const minuten = "....".split("");
const sekunden = ".....".split("");

Die Zeiger bestehen aus einzelnen Punkten: split("") ohne Trennzeichen zerlegt die Ketten in einzelne Zeichen. Der Stundenzeiger hat drei Punkte, der Minutenzeiger vier, der Sekundenzeiger fünf — je mehr Punkte, desto länger der Zeiger. Für jede Ziffer und jeden Punkt erzeugt das Script ein absolut positioniertes <span> und schreibt alles zusammen per innerHTML in den Container.

const sek = -1.57 + Math.PI * jetzt.getSeconds() / 30;
const min = -1.57 + Math.PI * jetzt.getMinutes() / 30;
const std = -1.575 + Math.PI * jetzt.getHours() / 6 + Math.PI * jetzt.getMinutes() / 360;

Aus der aktuellen Uhrzeit wird für jeden Zeiger ein Winkel berechnet — im Bogenmaß, mit dem die Mathefunktionen von JavaScript rechnen: Ein voller Kreis sind 2 · Math.PI. Der Zusatz -1.57 (etwa −π/2, eine Vierteldrehung) dreht den Nullpunkt nach oben zur XII. Beim Stundenzeiger fließen zusätzlich die Minuten ein, damit er zwischen zwei Stunden langsam weiterwandert statt zu springen.

const winkel = -1.0471 + i * winkelSchritt * Math.PI / 180;
setzen("aur-face" + i, clockHeight * Math.sin(winkel), clockWidth * Math.cos(winkel));

So kommt das Ziffernblatt auf die Kreisbahn: Math.cos() liefert die waagerechte, Math.sin() die senkrechte Auslenkung vom Mittelpunkt, jeweils zwischen −1 und 1, multipliziert mit der halben Breite bzw. Höhe der Uhr. Die Hilfsfunktion setzen() addiert den Mittelpunkt dazu und schreibt das Ergebnis in die CSS-Eigenschaften top und left. Die Zeigerpunkte werden genauso platziert, nur mit wachsendem Abstand i * zeigerHoehe vom Mittelpunkt — so reihen sie sich zu einem Strich auf.

zeichnen();
setInterval(zeichnen, 500);

zeichnen() läuft einmal sofort, damit die Uhr ohne Verzögerung erscheint; setInterval ruft die Funktion danach alle 500 Millisekunden erneut auf, sodass der Sekundenzeiger keine Sekunde verpasst.

Zum Anpassen: Die vier Farbvariablen am Anfang (fCol, sCol, mCol, hCol) nehmen jeden CSS-Farbwert an, mit clockHeight und clockWidth ändert ihr die Größe (beide gleich lassen, sonst wird die Uhr oval). Eine ausführlichere Erklärung des Uhrwerks findet ihr bei der analogen Uhr mit normalen Ziffern.

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