JavaScript Window setInterval Beispiel 2: Anzeige einer dynamischen Uhr

Das nächste Beispiel zeigt eine laufende Uhr in einem SPAN-Element an. Nach der Definition des entsprechenden Ausgabeelements mit der ID timer wird im Script-Bereich weiter unten die Funktion updateTimer() definiert.

Diese Funktion gibt die aktuelle Uhrzeit Formatiert im Ausgabeelement timer aus. Zunächst wird ein Textknoten im Ausgabeelement (mit ID timer - wird per getElementById aus dem Document-Objekt ermittelt) erzeugt, wenn dieses noch keines enthält. Dies ist nötig, da eine Ausgabe der Uhrzeit nur in einem Textknoten möglich ist. Danach wird ein Datum-Objekt mit aktuellen Datum- und Zeitdaten erzeugt. Die für dieses Beispiel interessanten Komponenten Stunde, Minute und Sekunde werden nun mit führenden Nullen vervollständigt, wenn sie einstellig sind (<10). Jetzt kann aus diesen Daten die für die Ausgabe vorgesehene Zeichenkette (String) erzeugt und schliesslich mit der Methode write ausgegeben werden.

Zum Schluß wird das automatische Starten der Funktion durch die Methode window.setInterval aktiviert. Der zweite Parameter legt dabei fest, dass die Funktion künftig einmal pro Sekunde aufgerufen werden soll. Man beachte, dass die Funktion erst nach Ablauf eines Intervalls zum ersten Mal aufgerufen wird.

<!-- Ausgabebereich für den Timer definieren
     In diesem Element soll die Uhrzeit später ausgegeben werden -->
<span id="timer"></span>
<script language="javascript" type="text/javascript">
<!-- // JavaScript-Bereich für ältere Browser auskommentieren
  // Funktion zur Ausgabe der Uhrzeit auf HTML-Element mit der ID 'timer'
  // definieren
  function updateTimer () {
    // Ausgabeelement für die Ausgabe über dessen Element-ID ermitteln
    // hängt schon ein Textknoten unter dem Ausgabeelement?
    if (!document.getElementById ("timer").firstChild)
      // wenn nicht, dann Textknoten an Ausgabeelement hängen
      document.getElementById ("timer").appendChild (document.createTextNode (""));
    // Instanz von Datum-Objekt per Default-Konstruktor erzeugen
    // (mit aktueller Zeit initialisieren)
    d = new Date ();
    // mit führender 0 auffüllen, wenn Stunde, Minute
    // oder Sekunde kleiner 10 ist
    h = (d.getHours () < 10 ? '0' + d.getHours () : d.getHours ());
    m = (d.getMinutes () < 10 ? '0' + d.getMinutes () : d.getMinutes ());
    s = (d.getSeconds () < 10 ? '0' + d.getSeconds () : d.getSeconds ());
    // Uhrzeit ausgeben
    ausgabe = 'Es ist jetzt ' + h + ':' + m + ':' + s + ' Uhr';
    document.getElementById ("timer").firstChild.data = ausgabe;
  }

  // Funktion zur Ausgabe der Uhrzeit soll einmal
  // pro Sekunde aufgerufen werden
  window.setInterval ("updateTimer ()", 1000);
// -->
</script>

« zurück zu Seite 1 weiter zu Seite 3 4 »