von Thomas Salvador.
Um eine laufende Uhr zu erreichen, muss die Anzeige freilich aufgefrischt werden.
Hierbei kommt die Methode setTimeout() zum Einsatz, mit der man eine Funktion nach einer gewissen Zeitspanne ausgeführen lassen kann. Setzt man nun in der aufgerufenen Funktion wieder setTimeout, so erreicht man damit eine periodisch ausgeführte Funktion.
Eine Alternative ist setInterval(), die direkt die periodische Ausführung ermöglicht. Und das wäre hier auch eine sehr gute Lösung.
Um Datum und Zeit in die Statuszeile des Browser zu bekommen, weist man einen wie auch immer gearteten String der Eigenschaft status des Objektes window zu. Enthält der String das Datum... Zufall:
<script type="text/javascript"><!-- var now = new Date(); window.status = now.toString(); //--> </script>
Um eine laufende Uhr zu erreichen, implementieren wir hier eine Funktion uhr(), die periodisch aufgerufen wird.
function uhr() {
// Freeware (c) 1999 by Thomas Salvador, brauchbar.de
var act = new Date();
window.status = act.toString();
window.setTimeout('uhr()', 1000);
}
Dabei wird das jeweils aktuelle Datum und die jeweils aktuelle Zeit als String in die Statuszeile gesetzt. Wir benutzen hier der Einfachheit halber toString(), freilich könnten wir die Anzeige auch erst formatieren.
Schließlich bestimmen wir, dass die Funktion in einer Sekunde erneut ausgeführt wird.
Um die Uhr anzustoßen, müssen wir die Funktion uhr() einmal von Hand aufrufen. Hierzu eignet sich der onload-Handler des HTML-Tags body:
<body onLoad="uhr();">
Da wir direkt in die Statuszeile schreiben, gibt es keinen weiteren HTML-Code, neben dem bereits erwähnten Anstßen
<body onLoad="uhr();">
Sie sehen dann die laufende Uhr in der Statuszeile, sofern Ihr Browser das unterstützt.
Eben hatten wir gesehen, wie man eine laufende Uhr in der Statuszeile erzeugen kann.
Völlig analog können wir auch im Dokument arbeiten. Da das Dokument selbst nach seiner (erstmaligen) Darstellung nicht mehr beeinflusst werden kann (DHTML lassen wir hier noch weg), müssen wir hier auf Formular-Felder zurückgreifen.
Es bieten sich sowohl Textfelder als auch Buttons an.
Buttons haben den Vorteil, dass der Wert vom Benutzer nicht editiert werden kann und – und das ist das eigentlich interessante – dass man den Button natürlich noch mit einer Operation belegen kann.
Dies werden wir später betrachten. Hier eine kurze Implementation mit einem Textfeld.
Wir werden ein Textfeld uhrfeld in einem Formular uhrform benutzen.
Wir implementieren zunächst das Grundgerüst:
function uhr() {
// Freeware (c) 1999 by Thomas Salvador, brauchbar.de
var act = new Date();
var x= act.getHours();
if (x <10) { x="0"+x; }
var y= act.getMinutes();
if (y <10) { y="0"+y; }
var z= act.getSeconds();
if (z <10) { z="0"+z; }
document.uhrform.uhrfeld.value = x+":"+y+":"+z;
}
Im eigentlichen Dokument platzieren wir dann unseren Button.
<form name="uhrform"> Es ist <input type="text" size="30" maxlength="30" name="uhrfeld" /> </form>
Auch hier muss die Uhr anzustoßen werden:
<body onLoad="uhr();">
Das Ergebnis:
Völlig analog zum Vorgehen mit einem Textfeld können wir auch mit einem Button arbeiten.
Der Button hat den Vorteil, dass man ihn noch mit einer Operation belegen kann.
Wir werden einen Button uhrbutton in einem Formular uhrform benutzen.
Wir implementieren auch hier zunächst das Grundgerüst:
function uhr() {
// Freeware (c) 1999 by Thomas Salvador, brauchbar.de
var act = new Date();
var x= act.getHours();
if (x <10) { x="0"+x; }
var y= act.getMinutes();
if (y <10) { y="0"+y; }
var z= act.getSeconds();
if (z <10) { z="0"+z; }
document.uhrform.uhrbutton.value = x+":"+y+":"+z;
}
Nun implementieren wir eine Funktion, die aufgerufen werden soll. Der Einfachheit halber sagen wir
function hallo() {
alert('\nSie haben den Uhr-Button angeklickt.\n')
}
Die Funktion alert() produziert nur die entsprechende Meldung.
Im eigentlichen Dokument platzieren wir dann unseren Button ganz analog zur Vorgehensweise beim Textfeld:
<form name="uhrform"> Es ist <input type="button" name="uhrbutton" value="00:00:00" onClick="hallo();"/> </form>
Mit dem Startwert 00:00:00 geben wir dem Button die benötigte Breite.
Der onclick-Handler besagt – wie der Name vermuten lässt – "wenn der Button angeklickt wird, dann mache dies". In unserem Falle wird die Funktion hallo() aufgerufen.
Das Anstoßen machen wir wieder mit dem onload-Handler von body:
<body onLoad="uhr();">
Das Ergebnis:
Viel Spaß mit den laufenden Uhren.