SELFHTML: Dynamisches HTML / Praxis / Datums-/Uhrzeitanzeige
Description: (SELFHTML 7.0) Beispiel einer Datums- und Uhrzeitanzeige mit Dynamischem HTML, die mit dem MS Internet Explorer und mit Netscape funktioniert.
Keywords: SELFHTML, Dynamisches HTML, Dynamic

SELFHTML/Quickbar Dynamisches HTML Lösungen für die Praxis

| ## Datums-/Uhrzeitanzeige
| Datums-/Uhrzeitanzeige - das Beispiel

## Datums-/Uhrzeitanzeige - das Beispiel

Anzeigebeispiel: So sieht's aus

Dieses Beispiel zeigt, wie Sie eine laufende Uhr, die Sie beliebig formatieren können, so realisieren können, daß sie sowohl auf dem MS Internet Explorer ab V4.0 als auch auf Netscape ab V4.0 funktioniert.

Hinweis: Zur besseren Orientierung enthält das Beispiel Verweise zu den entsprechenden Erläuterungen, z.B. 1*. Diese Verweise gehören nicht zum Quellcode. Falls Sie das Beispiel in einen Editor kopieren, müssen Sie diese Verweise löschen. Andernfalls erhalten Sie JavaScript-Fehlermeldungen.

### Beispiel:

    <html>
    <head>
    <style type="text/css">
    all.Uhr { font-family:Century Gothic,Arial; font-size:36pt; color:blue; }
    </style>
    2* <script language="JavaScript">
    <!--
     Wochentagname =
     new Array("Sonntag","Montag","Dienstag","Mittwoch","Donnerstag","Freitag","Samstag");
    function ZeitAnzeigen()
    {
     var Jetzt = new Date();
     var Tag = Jetzt.getDate();
     var Monat = Jetzt.getMonth() + 1;
     var Jahr = Jetzt.getYear();
     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 = Datum + "<br>" + Wochentagname[WoTag] + "<br>" + Uhrzeit;

    4* if(document.all)
       document.all.MicrosoftUhr.innerHTML = Gesamt;
     else if(document.layers)
      {
       document.NetscapeUhr.document.open();
       Gesamt = '<span class="Uhr")>' + Gesamt + '</span>';
       document.NetscapeUhr.document.write(Gesamt);
       document.NetscapeUhr.document.close();
      }

     window.setTimeout("ZeitAnzeigen()",1000);
    }
    // -->
    </script>
    </head>
    <body bgcolor=#FFFFFF>

    1* <div id="MicrosoftUhr" class="Uhr">
    </div>

    <layer id="NetscapeUhr">
    </layer>

    3* <script language="JavaScript">
    <!--
    window.setTimeout("ZeitAnzeigen()",1000);
    // -->
    </script>

    </body>
    </html>

### Erläuterung:

Im Körper der HTML-Datei im Beispiel werden zwei leere Behälter definiert: ein `<div>`-Bereich und ein `<layer>`-Bereich (1*). Die `id`-Namen der beiden Bereiche sagen bereits alles über die Bedeutung der Bereiche. Der `<div>`-Bereich wird für den MS Internet Explorer definiert, der `<layer>`-Bereich für Netscape. Netscape kennt zwar beide HTML-Tags, stellt den `<div>`-Bereich aber in keiner Weise dar, weil dieser leer ist.

Die Beispieldatei enthält ferner zwei JavaScript-Bereiche. Der eine Bereich ist im Dateikopf notiert (2*), der andere unterhalb der beiden "Behälter" (3*). Im unteren JavaScript-Bereich passiert nichts weiter als der erste Aufruf der JavaScript-Funktion `ZeitAnzeigen()`, die im oberen Script-Bereich steht und für die Zeitanzeige verantwortlich ist. Der Aufruf erfolgt durch die Einbettung in eine `setTimeout()`-Methode um 1000 Millisekunden, also um eine Sekunde verzögert. Dies ist notwendig, da der MS Internet Explorer sonst eine merkwürdige Fehlermeldung bringt (Begründung dafür gibt es keine, das sind typische Probleme, die nur durch viel Herumprobieren zu lösen sind).

In dem JavaScript-Bereich, der im Dateikopf steht, wird gleich beim Einlesen ein global definierter Array für die deutschen Wochentage definiert. Darunter steht die Funktion `ZeitAnzeigen()`, die für die dynamische Datums-/Uhrzeitanzeige verantwortlich ist. Die Funktion ermittelt zunächst mit Hilfe des Date-Objekts die aktuelle Zeit. Mit Hilfe diverser Formatierbefehlen erzeugt sie dann eine Zeichenkette, die einen ordentlich Datums-/Uhrzeitdarstellung Konvention darstellt. Diese Zeichenkette wird in der Variablen mit dem Namen `Gesamt` gespeichert. All diese Dinge haben noch nichts mit der Anzeige zu tun und funktionieren problemlos mit beiden Browsern.

Die entscheidende Abfrage zur Unterscheidung der Browser erfolgt in den Anweisungen (4*):
`if(document.all)` und
`else if(document.layers)`
Es handelt sich um Abfragen, ob das betreffende Objekt existiert. Der MS Internet Explorer kennt das all-Objekt, das Layer-Objekt dagegen nicht. Netscape dagegen kennt das Layer-Objekt, aber nicht das all-Objekt. Ältere Browser, die keines dieser beiden JavaScript-Objekte kennen, gelangen in keinen der beiden Zweige.

Beim MS Internet Explorer ist die Sache relativ einfach. Mit der Eigenschaft `innnerHTML` des all-Objekts läßt sich jederzeit dynamisch der Inhalt eines HTML-Elements neu setzen. Mit `document.all.MicrosoftUhr` wird das Element angesprochen, das mit `id=` den entsprechenden Namen erhalten hat, also der `<div>`-Bereich. Die Eigenschaft `innnerHTML` bekommt einfach den Wert der Variablen Gesamt zugewiesen. Damit zeigt der Internet Explorer die aktuelle Uhrzeit in dem `<div>`-Bereich an.

Bei Netscape macht sich das Beispiel die Eigenschaft zu nutze, daß ein Layer eine Art Dokument im Dokument darstellt, in das man jederzeit mit Hilfe von `document.write()` neue Daten schreiben kann. Das Dokument im Dokument wird im Beispiel mit `document.NetscapeUhr.document` angesprochen. Dabei ist `NetscapeUhr` der Name, den der Layer bei `id=` erhalten hat. Ganz wichtig ist, daß zunächst `document.open()` notiert wird und am Ende `document.close()`. Ansonsten würde Netscape die Uhrzeitanzeige nicht jede Sekunde überschreiben, sondern fortlaufend hintereinander schreiben.

Leider übernimmt Netscape bei `document.write()` keine CSS-Style-Sheet-Angaben. Deshalb wird dynamisch innerhalb des `document.write()`-Befehls mit einem `<span>`-Tag die nötige Zuweisung nachgeholt. Alle Angaben, die zur Formatierung der Uhr gehören, stehen in einem Style-Sheet-Bereich im Dateikopf.

weiter: | Verschiebbare Seitenelemente
zurück: | Dynamisches Positionieren (Netscape)

SELFHTML/Quickbar Dynamisches HTML Lösungen für die Praxis

© 1998 Stefan Münz, muenz@csi.com