Analoge Uhr

So funktioniert das Script

Das Script hat drei Teile: Zuerst kommen die Einstellungen (Farben und Größe), dann baut es die Uhr einmalig aus vielen kleinen <span>-Elementen zusammen, und schließlich berechnet eine Funktion im Halbsekundentakt, wo jedes dieser Elemente gerade stehen muss. Alles steckt in einer sofort ausgeführten Funktion, damit die Variablennamen nicht mit anderen Scripts auf der Seite kollidieren.

const face = "1 2 3 4 5 6 7 8 9 10 11 12".split(" ");
const stunden = "...".split("");
const minuten = "....".split("");
const sekunden = ".....".split("");

Hier steckt das Baumaterial der Uhr: split(" ") zerlegt die Zeichenkette an den Leerzeichen in ein Array (eine Liste) mit den zwölf Ziffern. Die drei Zeiger bestehen aus einzelnen Punkten — split("") ohne Trennzeichen zerlegt die Punktketten in einzelne Zeichen. Der Stundenzeiger hat drei Punkte, der Minutenzeiger vier, der Sekundenzeiger fünf: Je mehr Punkte, desto länger der Zeiger.

html += '<span id="au-face' + i + '" style="position:absolute;' +
  'font:bold 10px Arial,sans-serif;color:' + fCol + '">' + face[i] + '</span>';

Für jede Ziffer und jeden Zeigerpunkt entsteht ein absolut positioniertes <span> mit einer durchnummerierten id (au-face0, au-face1 und so weiter). Der zusammengesetzte HTML-Text wird am Ende per innerHTML in den Container au-uhr geschrieben. Das Original benutzte dafür noch document.write() — das gilt heute als überholt, weil es nur während des Seitenaufbaus funktioniert.

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;

Das ist das Herz der Uhr: Aus der aktuellen Zeit wird für jeden Zeiger ein Winkel berechnet — allerdings nicht in Grad, sondern im Bogenmaß, mit dem die Mathefunktionen von JavaScript arbeiten. Ein voller Kreis sind dort 2 · Math.PI (etwa 6,28). Bei 60 Sekunden pro Runde ergibt Math.PI * Sekunden / 30 genau den passenden Anteil davon. Der Zusatz -1.57 (ungefähr −π/2, also eine Vierteldrehung) dreht den Nullpunkt nach oben zur 12. Beim Stundenzeiger fließen zusätzlich die Minuten ein, damit er zwischen zwei Stunden langsam weiterwandert statt zu springen.

function setzen(id, oben, links) {
  const stil = document.getElementById(id).style;
  stil.top = (clockHeight + oben) + "px";
  stil.left = (clockWidth + links) + "px";
}

Mit Sinus und Kosinus wird aus einem Winkel ein Punkt auf der Kreisbahn: Math.cos(winkel) liefert die waagerechte, Math.sin(winkel) die senkrechte Auslenkung, jeweils zwischen −1 und 1. Multipliziert mit clockWidth bzw. clockHeight ergibt das die Position relativ zum Mittelpunkt der Uhr; setzen() addiert den Mittelpunkt dazu und schreibt das Ergebnis in die CSS-Eigenschaften top und left. Die Zeigerpunkte bekommen mit i * zeigerHoehe wachsende Abstände vom Mittelpunkt — so reihen sie sich zu einem Strich auf.

zeichnen();
setInterval(zeichnen, 500);

zeichnen() läuft einmal sofort, damit die Uhr nicht erst nach einer Wartezeit erscheint. setInterval(zeichnen, 500) ruft die Funktion danach alle 500 Millisekunden erneut auf — oft genug, dass 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 der Uhr — beide gleich lassen, sonst wird sie oval. Und wer mag, ersetzt die Ziffernkette "1 2 3 … 12" durch eigene Zeichen, zum Beispiel Sternchen.