Klasse anclock

Eine Analog Uhr aus DIVs

Einleitung

For information in English see the Docs.

Es gibt verschiedene Varianten, eine Analog-Uhr umzusetzen:

  • serverseitig wird eine fertige Uhr zum Client gesendet, z.B. unter PHP mit gd erzeugte Grafik
  • clientseitig Flash (aber Flash ist ja out, oder?)
  • clientseitig CSS 3: Zeichnen auf ein CANVAS
  • clientseitig CSS 3: Zeiger sind HTML-Elemente und Rotation erfolgt mit dem CSS-Attribut "transform"

Ich habe eine Javascript Klasse für eine Analog-Uhr der letztgenannten Variante geschrieben, die auch rechts oben eingeblendet wird.

Name der Klasse: Anclock
Die Uhr Unterstützt div. Parameter und Funktionen.

  • verschiedene Layouts
  • Ein-/ Auschalten des Sekundenzeigers, Sekunden- und Datumsanzeige
  • Eigenschaften der Uhr können zur Laufzeit mit der Methode setOptions geändert werden
  • Wahlweise Anzeige der Rechnerzeit oder relativ zu UTC

Demo

Ihr Rechner:
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
20:0645
 


Weltzeituhr:

Tokio
 
 
 
 
 
 
 
 
 
 
 
 
21
 
 
20:06
Berlin
 
 
 
 
 
 
 
 
 
 
 
 
21
 
 
20:06
London
 
 
 
 
 
 
 
 
 
 
 
 
21
 
 
20:06
Caracas
 
 
 
 
 
 
 
 
 
 
 
 
21
 
 
20:06
 


Styling:
In der Online-Dokumentation ist auch ein Code-Generator. Mit diesem kann man leicht Aussehen und Verhalten zusammenklicken. Anschliessend braucht man nur mit Copy & Paste den Programmcode übernehmen.

Verwendung in der eigenen Webseite

Man lädt einmal die Klasse:

<script src="/javascript/anclock.class.js"></script>
Html-Header-Snippet



Im Body Bereich ist ein DIV mit einer ID zu definieren:

<html>
    ...
    <body>
        ...
        <div id="democlockanalog"></div>
        ...
    </body>
</html>
Html-Body-Snippet



Beim Onload ist die Uhr mit new zu initialisieren; als Parameter ist die ID des DIVs anzugeben.

oClock=new Anclock('democlockanalog');
Javascript-Snippet


Man kann optional Einstellungen als Array im 2. Parameter mitgeben:

oDemoClock=new Anclock('democlockanalog', {width: '100px', height: '100px', bShowSeconds: 1, bShowDay: 0});
Javascript-Snippet



Zur Laufzeit lassen sich die Einstellungen mit setOptions ändern:

oDemoClock=new Anclock('democlockanalog');
oDemoClock.setOptions({width: '100px', height: '100px', bShowSeconds: 1, bShowDay: 0});
Javascript-Snippet

Dokumentation

Der Download ist über Sourceforge als auch Github möglich.

Eine ausführliche Dokumentation auf englisch befindet sich auf meinen Doc-Seiten.

Beide Links finden Sie rechts oben.