Javascript - Uhr
Demo
So kann es aussehen:Die Variante mit Grafiken ...
Seitenanfang
Variante mit Grafiken
Das Ganze funktioniert im Zusammenspiel
mit folgenden Komponenten, von denen man
vor dem Weiterlesen schon einmal
gehört haben sollte:
- HTML: img-Tag und seine Attribute, Grafiken im Voraus laden
- JavaScript: Datumfunktion,
Objekte: date, document, images, math, windows
Grafiken definieren
Im BODY-Bereich der HTML-Seite werden 5 Grafiken mit Hilfe des IMG-Tags nebeneinander angeordnet: je 2 für die 2-stellige Anzeige der Stunden und Minuten und ein Trenner. Um sicher zu gehen, dass kein Zeilen-Umbruch erfolgt, sind die Grafiken von einem NOBR-Tag eingeschlossen.Mit SRC wird eine Grafik geladen; es gelten hier folgende Namenskonventionen (cl für "clock"):
* cl_dpt.gif - Doppelpunkt-Grafik
* cl_.gif - "leere" Grafik (zum Ausblenden des ":")
* cl_0.gif ... cl_9.gif - Zifferngrafiken
Die Grafikobjekte erhalten mit dem Attribut NAME einen Namen, womit sie später per JavaScript angesprochen werden:
* HZ = Zehnerstelle der Stunden
* HE = Einerstelle der Stunden
* DP = Doppelpunkt (Trennzeichen)
* MZ = Zehnerstelle der Minuten
* ME = Einerstelle der Minuten
<HTML>
<HEAD>
...
</HEAD>
<BODY>
...
<NOBR>
<IMG SRC="../graphic/cl_.gif" WIDTH="20" HEIGHT="30" NAME="HZ">
<IMG SRC="../graphic/cl_.gif" WIDTH="20" HEIGHT="30" NAME="HE">
<IMG SRC="../graphic/cl_.gif" WIDTH="10" HEIGHT="30" NAME="DP">
<IMG SRC="../graphic/cl_.gif" WIDTH="20" HEIGHT="30" NAME="MZ">
<IMG SRC="../graphic/cl_.gif" WIDTH="20" HEIGHT="30" NAME="ME">
</NOBR>
</BODY>
</HTML>
Seitenanfang
JavaScript
Mit Hilfe von JavaScript wird die aktuelle
Systemzeit ermittelt:
thedate = new Date(); hours = thedate.getHours(); minutes = thedate.getMinutes();
...und in die Zehner- und
Einerstellen von Stunde und Minute
aufgesplittet und in je einer Variable abgelegt.
Mit Hilfe der Eigenschaft SRC des Objektes
"images" wird an der entsprechenden Stelle
eine Ziffer mit Hilfe der Grafik "cl_[Ziffer].gif"
angezeigt.
Die Funktion window.settimeout() ruft
die eigene Funktion nach 2 Sekunden erneut auf,
um die Systemzeit auszulesen und die Anzeige
zu aktualisieren.
Der blinkende Doppelpunkt ist recht einfach
realisiert: wenn gerade das "Leerzeichen"
cl_.gif bei document.images.DP
dargestellt wird, so wird der
Doppelpunkt geladen; anderenfalls (da es nur
2 Zustände gibt) das Leerzeichen.
Mit dem Setzen des Intervalls in der o.g.
Funktion window.settimeout() ist die
Blinkfrequenz vorgegeben.
Zu guter letzt:
mit dem Laden des Dokuments soll die Uhr
anfangen zu "laufen"? Es bietet sich das
Event OnLoad des BODY-Tags an, in dem die
JavaScript-Funktion erstmalig aufgerufen wird. Etwas
umständlicher ist die Variante im BODY-Bereich
inerhalb eines SCRIPT-Tags diese Funktion aufzurufen.
Aber es geht natürlich auch...
Für alle Hungrigen gibt es hier den Quellcode
des JavaScript-Anteils:
<HTML>
<HEAD>
...
<script language=javascript>
<!--
function ah_clock()
{
thedate = new Date();
hours = thedate.getHours();
minutes = thedate.getMinutes();
gif_base = "../graphic/cl_"
gif_ext = ".gif"
pic_hz=Math.round((hours+5)/10-1);
pic_he=hours - Math.round((hours+5)/10-1)*10;
pic_mz=Math.round((minutes+5)/10-1);
pic_me=minutes - Math.round((minutes+5)/10-1)*10;
document.images.HZ.src=gif_base + pic_hz + gif_ext;
document.images.HE.src=gif_base + pic_he + gif_ext;
document.images.MZ.src=gif_base + pic_mz + gif_ext;
document.images.ME.src=gif_base + pic_me + gif_ext;
my_string = document.images.DP.src;
if (my_string.indexOf("cl_.gif") > 0)
document.images.DP.src = gif_base + 'dpt' + gif_ext;
else
document.images.DP.src = gif_base + gif_ext;
window.setTimeout("ah_clock();",2000);
}
//-->
</script>
</HEAD>
<BODY ... OnLoad="ah_clock()">
...
</BODY>
</HTML>
Seitenanfang
Feintuning
Bei Wechsel der Anzeige von Stunden/ Minuten
muss eine neue Grafik geladen werden. Damit
dies (insbesondere bei Verwendung einer Internetseite)
performant ist, müssen die Grafiken im Voraus
geladen werden, d.h. in einem gerade sichtbaren oder
vorher angezeigten Dokument müssen alle Grafiken
einmal angezeigt werden, damit sie im Cache des
Browser zwischengespeichert sind.
Verwendung von Frames:
Es bietet sich die Verwendung von Frames an.
Bei der Definition eines Framesets kann man einem
Frame die Option Scrolling=NO mitgeben. Dies
bewirkt, dass sofern eine Webseite grösser ist, als
der gerade sichtbare Bereich, keine Scrollbalken
angezeigt werden, um zu unsichtbaren Bereichen wechseln
können.
Dies kann man auch für seine Zwecke ausnutzen:
verwendet man im BODY-Bereich eine Tabelle
mit HEIGHT=100%, so kann man sicher sein, dass
Elemente unterhalb dieser Tabelle im Browser
nie sichtbar sind. Dort kann man einfach die
Grafiken hintereinanderweg anzeigen lassen.
"unsichtbare" Grafiken
Wer keine Frames verwendet, dem bleibt die
Möglichkeit, die Grafiken auf derselben Seite
"vorzuladen". Mit Hilfe der Attribute HEIGHT
und WIDTH des IMG-Tags kann man die angezeigte
Grösse auf 1x1 Pixel *
setzen - dies wird
das menschliche Auge kaum wahrnehmen.
<IMG SRC="grafik.gif" WIDTH="1" HEIGHT="1" ALT="">
Hat man mehrere Grafiken zum Vorladen, sollten die
Grafiken nicht hintereinander im Dokument
folgen. Man sieht dann evtl. mehrere
aufeinanderfolgende Punkte. Besser ist es, sie
auf der Seite verstreuen, um die kleinen Punkte
dem Blick des Betrachters zu entziehen.
*noch eine Anmerkung:
Zuweilen findet man den Tipp, die Grösse
0x0 Pixel bei den unsichtbaren Grafiken zu verwenden. Es gibt
Browser, die dann dazu neigen, das Bild Originalgrösse
zu zeigen, was an dieser Stelle nicht der gewünschte
Effekt ist. Die Angabe von 1x1 Pixel hingegen funktioniert
immer.
... und noch eine andere Variante:
die im Voraus zu ladenden Grafiken kann man auch in einem
unsichtbaren DIV-Tag verstecken:
<DIV style="display: none;">
<IMG SRC="grafik.gif" ALT="">
</DIV>
Seitenanfang
Variante mit Text
Man kann auch auf die Freiheit beliebig gestaltbarer Grafiken verzichten und
stattdessen mit reiner Textdarstellung arbeiten.
Zur Formatierung kann/ muss man CSS verwenden.
Man braucht dazu ein HTML-Element, dem man eine ID gibt:
<span id="uhralstext"></span>
... und per Javascript schreibt man in das Element dieser ID mit der Eigenschaft InnerHTML die hinein:
document.getElementById('uhralstext').innerHTML=sUhrzeit;
Und so sieht es komplett als Funktion aus:
function ah_clock2()
{
thedate = new Date();
hours = thedate.getHours();
minutes = thedate.getMinutes();
var sUhrzeit='';
// Stunde
sUhrzeit+=Math.round((hours+5)/10-1);
sUhrzeit+=hours - Math.round((hours+5)/10-1)*10;
// Doppelpunkt oder Leerzeichen
if (document.getElementById('uhralstext').innerHTML.indexOf(':')>0) sUhrzeit+=' '
else sUhrzeit+=':';
// Minuten
sUhrzeit+=Math.round((minutes+5)/10-1);
sUhrzeit+=minutes - Math.round((minutes+5)/10-1)*10;
document.getElementById('uhralstext').innerHTML=sUhrzeit;
window.setTimeout("ah_clock2();",2000);
}
Seitenanfang