SELFHTML: Dynamisches HTML / Beispiele für die Praxis / Laufende Datums-/Uhrzeitanzeige
Author: Redaktion SELFHTML, selfhtml81@selfhtml.org
Description: Wie Sie mit dynamischem HTML eine laufende Anzeige für Datum und Uhrzeit in eine Web-Seite einbauen können.
Keywords: SELFHTML, Dynamisches HTML, Dynamic HTML, DHTML, Document Object Model, DOM, Datum, Uhrzeit, laufende Uhr
Date: 2005-09-20T06:02:21+02:00

| # Laufende Datums-/Uhrzeitanzeige
| Hinweise zu diesem Beispiel Quelltext mit Erläuterungen Anzeigebeispiel: So sieht's aus

## Hinweise zu diesem Beispiel

Dieses Beispiel zeigt, wie Sie eine laufende Uhr, die Sie beliebig formatieren können, so realisieren können, dass sie ab Internet Explorer V4.x und Netscape V4.x funktioniert. In der Praxis eignet sich eine solche laufende Uhr z.B. für Seiten, die dauerhaft eingeblendet werden, z.B. in einem Frame-Fenster, dessen Inhalt sich beim Surfen nicht ändert, oder auf Seiten, die Multimedia-Spiele oder einen eingebetteten Chat enthalten - also auf Seiten, die der Anwender lange anzeigt, ohne darin weiterzuscrollen oder die Seite zu verlassen.

Das Beispiel benutzt die DHTML-Bibliothek, um das zu leisten, was in dem Beispiel an dynamischem HTML erforderlich ist.

## Quelltext mit Erläuterungen

Das Beispiel zeigt eine vollständige HTML-Datei, in der die laufende Datums-/Uhrzeit-Anzeige eingebettet ist. Die Datei `dhtml.js`, in der die Funktionen der DHTML-Bibliothek enthalten sind, muss vorhanden sein und sich im Beispiel im gleichen Verzeichnis befinden wie die HTML-Datei.

### Beispiel:

Anzeigebeispiel: So sieht's aus ( DHTML-Bibliothek)

    <html><head>
    <title>Test</title>
    <script type="text/javascript" src="dhtml.js"></script>
    <script type="text/javascript">
    function ZeitAnzeigen () {
      var Wochentagname = new Array("Sonntag", "Montag", "Dienstag", "Mittwoch",
                                    "Donnerstag", "Freitag", "Samstag");
      var Jetzt = new Date();
      var Tag = Jetzt.getDate();
      var Monat = Jetzt.getMonth() + 1;
      var Jahr = Jetzt.getYear();
      if (Jahr < 999)
        Jahr += 1900;
      var Stunden = Jetzt.getHours();
      var Minuten = Jetzt.getMinutes();
      var Sekunden = Jetzt.getSeconds();
      var WoTag = Jetzt.getDay();
      var Vortag = (Tag < 10) ? "0" : "";
      var Vormon = (Monat < 10) ? ".0" : ".";
      var Vorstd = (Stunden < 10) ? "0" : "";
      var Vormin = (Minuten < 10) ? ":0" : ":";
      var Vorsek = (Sekunden < 10) ? ":0" : ":";
      var Datum = Vortag + Tag + Vormon + Monat + "." + Jahr;
      var Uhrzeit = Vorstd + Stunden + Vormin + Minuten + Vorsek + Sekunden;
      var Gesamt = Wochentagname[WoTag] + ", " + Datum + ", " + Uhrzeit;

      if (DHTML) {
        if (NS4) {
          setContent("id", "Uhr", null, '<span class="Uhr">' + Gesamt + "<\/span>");
        } else {
          setContent("id", "Uhr", null, Gesamt);
        }
        window.setTimeout("ZeitAnzeigen()", 1000);
      }
    }

    </script>
    <style type="text/css">
    #Uhr { position:absolute; top:10px; left:10px; }
    #RestDerSeite { position:absolute; top:50px; left:10px; }
    .Uhr { font-family:Arial; font-size:24px; color:blue; }
    .RestDerSeite { font-family:Arial; color:black; }
    </style>

    </head>
    <body onload="window.setTimeout('ZeitAnzeigen()', 1000)">

    <div id="Uhr" class="Uhr">&nbsp;</div>

    <div id="RestDerSeite" class="RestDerSeite">

    <h1>Willkommen auf dieser Seite</h1>
    <p>hier gehts ganz normal weiter</p>

    </div>

    </body>
    </html>

### Erläuterung:

Im Körper der HTML-Datei im Beispiel werden insgesamt zwei `div`-Bereiche definiert. Beide Bereiche erhalten einen id-Namen und erhalten über den jeweiligen id-Namen im `style`-Bereich im Dateikopf entsprechende CSS-Eigenschaften zugewiesen. Beide Bereiche werden absolut positioniert. Ohne diesen Trick wäre die ganze Sache mit Netscape 4.x nicht realisierbar. Der erste Bereich dient zur Anzeige von Datum und Uhrzeit, und der zweite Bereich enthält den gesamten restlichen Inhalt der Datei, weshalb er auch den Namen `RestDerSeite` trägt.

Der erste Bereich enthält zunächst nur ein geschütztes Leerzeichen. So sieht man zunächst noch nichts von dem Bereich, aber das Leerzeichen ist wichtig, damit der Bereich einen Inhalt hat. Ansonsten würde beim ersten dynamischen Zugriff auf seinen Inhalt mit DOM-fähigen Browsern und den Funktionen der DHTML-Bibliothek ein Fehler erzeugt.

Die Beispieldatei enthält ferner zwei JavaScript-Bereiche im Dateikopf. Im ersten, leeren JavaScript-Bereich wird die DHTML-Bibliothek eingebunden, im zweiten steht die Funktion `ZeitAnzeigen()`, die für die Zeitanzeige verantwortlich ist. Im einleitenden `<body>`-Tag ist der Event-Handler `onload`, der eintritt, wenn die Datei und alle ihre eingebundenen Ressourcen vollständig geladen sind. Diesem Event-Handler ist ein Funktionsaufruf zugeordnet. Er startet die Funktion `ZeitAnzeigen()`, jedoch eingebettet in eine setTimeout-Anweisung, die den Aufruf um 1 Sekunde bzw. 1000 Millisekunden verzögert. In der ersten Sekunde wird also noch nichts angezeigt.

Innerhalb der Funktion `ZeitAnzeigen()` wird zunächst ein Array für die deutschen Wochentage definiert. Anschließend ermittelt die Funktion mit Hilfe des Date-Objekts die aktuelle Zeit. Mit Hilfe diverser Formatierbefehlen erzeugt sie dann eine Zeichenkette, die eine ordentliche Datums-/Uhrzeitdarstellung Konvention nach deutscher Konvention enthält. Diese Zeichenkette wird in der Variablen mit dem Namen `Gesamt` gespeichert. All diese Dinge haben noch nichts mit der Anzeige zu tun.

Der eigentliche DHTML-Teil ist dank der eingebundenen DHTML-Bibliothek kein großes Problem. Mit `if (DHTML)` wird zunächst abgefragt, ob überhaupt Dynamisches HTML verfügbar ist. Der gesamte Code zum dynamischen Schreiben in den `div`-Bereich wird davon abhängig gemacht. So werden Fehlermeldungen in Browsern vermieden, die zwar JavaScript, aber kein Dynamisches HTML beherrschen. Dann wird abgefragt, ob mit dem älteren Netscape-Modell gearbeitet wird. Wenn ja, sieht das dynamische Schreiben in den `div`-Bereich ein klein wenig anders aus als in den übrigen Fällen. Der Grund ist eine weitere Schwäche des Netscape-4-Browsers. Er würde die CSS-Klasse `Uhr` im einleitenden `div`-Tag ignorieren, wenn man sie ihm nicht noch mal in Form eines `span`-Elements mit in den dynamischen Bereich schreiben würde. Nur so erhält die Datums-/Uhrzeitanzeige die CSS-Formatierungen, die im Dateikopf im `style`-Bereich für die `Uhr`-Klasse festgelegt werden. Das dynamische Ändern des `div`-Inhalts geschieht durch Aufruf der Bibliotheksfunktion `setContent()`, die sich um alle weiteren Einzelheiten kümmert.

In der letzten Anweisung innerhalb der Funktion `ZeitAnzeigen()` ruft sich die Funktion selber wieder auf, und zwar wieder mit einer durch `window.setTimeout()` bewirkten Zeitverzögerung von 1000 Millisekunden oder einer Sekunde. Dadurch passiert eine Sekunde lang nichts, und dann wird die Zeit erneut geschrieben.

| Bilderbuch zum Umblättern
| Dynamische Navigationsleiste

© 2007 Impressum