brauchbar.de - WebDesign, Programmierung,Development in HTML, CSS, Javascript, PHP, Perl und mehr

[ Startseite | Artikel : HTML · JavaScript · CSS · Perl · Usability · Sonstiges | Services | Über ]


verwandte Artikel und Seiten

Laufende Uhren

von Thomas Salvador.

Laufende Uhren

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.

Laufende Uhr in der Statuszeile

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, http://www.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();">

Uhr in Statuszeile ausprobieren

Laufende Uhr in einem Textfeld

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, http://www.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.

Beispiel:

<form name="uhrform">
Es ist <input type=text size=30 maxlength=30 name="uhrbutton">
</form>

Auch hier muss die Uhr anzustoßen werden:

  <body onLoad="uhr();">

Uhr in einem Feld ausprobieren

Laufende Uhr in einem Button

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, http://www.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:

Beispiel:

<form name="uhrform">
Es ist <input type=button name="uhrbutton"
                 value="00:00:00"
                 onClick="hallo();">
  </form>

Mit den X geben wir dem Button eine gewisse Breite. Wie erwähnt kann diese nachträglich nicht angepasst werden.

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();">

Uhr in einem Button ausprobieren


Verwandte Artikel und Seiten



brauchbar web
Diese Site anlinken. Artikel zu CSS | HTML | JavaScript | Perl | Usability | Sonst. | nach Ausgabe.

Copyright © 1999-2015 Thomas Salvador und brauchbar.de . Alle Rechte vorbehalten. Gehostet bei all-inkl.
Reproduktion, ganz oder in Teilen, nur mit schriftlicher Zustimmung von Thomas Salvador. Impressum · Datenschutzerklärung · Kontakt.

zum Inhaltsverzeichnis der 13. Ausgabe.

Linken Sie bitte zu der festen Adresse http://www.brauchbar.de/wd/artikel/59.html .