template
Im digitalen Zeitalter wirken analoge Uhren zwar etwas antiquiert, haben aber zweifellos einen eigenen Charme und erzeugen ein gewisses Retro-Feeling.
|
Zur Darstellung wird ein leeres Ziffernblatt benötigt; die Zeiger setzen sich aus kleinen Bildelementen zusammen (hier: 3x3 Pixel Größe). Im Beispiel besitzt der Stundenzeiger 7 Elemente, der Minutenzeiger 9 Elemente. Diese Einzelbilder werden beim Laden der Seite von einer Initialisierungsfunktion (hier: ClockInit) erzeugt, wobei die jeweiligen Images den POSITION-Wert absolute erhalten und als Kind-Knoten an den DIV gehängt werden, der auch das Ziffernblatt enthält. Dieser Container-DIV besitzt den POSITION-Wert relative; dies vereinfacht die Positionierung der Zeigerelemente, deren (Offset-)Koordinaten sich nun direkt auf den Container-DIV beziehen.
Das Aktualisieren ist über eine Timer-Funktion (hier: ClockTimer) gesteuert, die sich alle 10 Sekunden selbst aufruft und den momentanen Minuten-Wert prüft - sobald dieser sich ändert, erfolgt eine Neupositionierung der Zeigerelemente (hier durch die Funktion ClockUpd). In der Demo werden dabei auch die Datums- und Tageszeit-Werte neu geschrieben:
| Stundenbereich | Tageszeit |
| 02 ... 06 | frühmorgens |
| 06 ... 10 | morgens |
| 10 ... 12 | vormittags |
| 12 ... 14 | mittags |
| 14 ... 18 | nachmittags |
| 18 ... 22 | abends |
| 22 ... 02 | nachts |
Natürlich ist die Angabe der Tageszeit ein optionales Feature, denn i.d.R. weiss man ja, ob es gerade Nacht oder Tag ist. Falls sich die Uhrzeit allerdings auf andere Zeitzonen (z.B. innerhalb einer Chat-Anwendung) bezieht, ist diese Information recht hilfreich.
Im Zuge einer Internationalisierung könnte man die Tageszeit-Strings auch in einem Array speichern; dann könnte man für jede unterstützte Sprache ein passendes Array bereitstellen. |
Verwendete Grafiken:
| img/i95clock.gif |
 |
Ziffernblatt |
| img/i3Hr.gif |
 |
Element für den Stundenzeiger |
| img/i3Mi.gif |
 |
Element für den Minutenzeiger |
Hier der Quellcode:
CSS im Header
.clockDat {FONT:bold 13px arial,helvetica,sans-serif;COLOR:#888;TEXT-ALIGN:center;}
.clockDti {FONT:13px arial,helvetica,sans-serif;COLOR:#888;TEXT-ALIGN:center;}
Javascript im Header
function $(id) { return document.getElementById(id); }
//---- clock
var PI180=Math.PI/180,imMi=[],imHr=[],cloM=-1;
function ClockTimer() { ClockUpd(); window.setTimeout(ClockTimer,10000); }
function ClockUpd() { var d=new Date(),m=d.getMinutes(); if (cloM==m) return; var i,o,dx,dy,h=d.getHours();
dx=3*Math.cos((h=((27-h)%12)*30-(cloM=m)*.5)*PI180); dy=-3*Math.sin(h*PI180);
for (i=1;i<8;++i) { (o=imHr[i].style).left=parseInt(46+i*dx); o.top=parseInt(46+i*dy); }
dx=3*Math.cos((m=((75-m)%60)*6)*PI180); dy=-3*Math.sin(m*PI180);
for (i=1;i<10;++i) { (o=imMi[i].style).left=parseInt(46+i*dx); o.top=parseInt(46+i*dy); }
$('tdDat').firstChild.data='SoMoDiMiDoFrSa'.substr(d.getDay()*2,2)+', '+d.getDate()+'.'+(d.getMonth()+1)+'.';
if ((h=(d.getHours()+2)%24)<4) m='nachts'; else if (h<8) m='fr\xFChmorgens'; else if (h<12) m='morgens';
else if (h<14) m='vormittags'; else if (h<16) m='mittags'; else if (h<20) m='nachmittags';
else m='abends'; $('tdDti').firstChild.data=m; }
function ClockInit() { var i,o,dv=$('dvClock');
for (i=1;i<8;++i) { imHr[i]=o=document.createElement('img');
o.src='img/i3Hr.gif'; o.style.position='absolute'; dv.appendChild(o); }
for (i=1;i<10;++i) { imMi[i]=o=document.createElement('img');
o.src='img/i3Mi.gif'; o.style.position='absolute'; dv.appendChild(o); } ClockTimer(); }
Weiter unten, im BODY, die Zeitanzeige:
<table bgcolor='#EEEEEE' cellspacing='0' cellpadding='0'>
<tr><td><div id='dvClock' style='POSITION:relative;'><img src='img/i95clock.gif'></div></td></tr>
<tr><td id='tdDat' class='clockDat'>-</td></tr>
<tr><td id='tdDti' class='clockDti'>-</td></tr></table>
Javascript zur Initialisierung:
<SCRIPT type='text/javascript'>ClockInit();</SCRIPT>
| template |
 |