Axels Webseite

Klasse anclock

Eine Analog Uhr aus DIVs

Steckbrief :: AnClock

Standard-Ansicht
AnalogUhr mit Zeigern aus Divs

Typ:
Klasse
Download:
Sourceforge: Zip (8 kB)
Source:
Sourceforge
Github
Dokumentation:
Axels Docs (en)
Die oben rechts auf meiner Webseite eingeblendete Analog-Uhr ist als Javascript-Klasse geschrieben.

Features:
  • Uhr aus DIVs
  • Zeiger und Uhr lassen sich mit CSS in Form, Grösse und Gestaltung customizen. Ein Codegenerator befindet sich in der Dokumentation.
  • Tag des Monats, Anzeige der Zeit, Sekundenzeiger lassen sich ein- und ausblenden.
  • Mit Angabe eines Deltas kann man die Zeit einer anderen Zeitzone anzeigen lassen
  • Eigenschaften der Uhr können zur Laufzeit mit der Methode setOptions geändert werden
  • Uhr kann gestoppt sein - z.B. für die Umsetung eines Lernprogramms für Uhrzeiten

Lizenz:
  • GNU GPL v3 (Opensource)
Weitere Screenshots:

Skins
Weltzeit Uhr

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.

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.