SELFHTML: Dynamisches HTML / Beispiele für die Praxis / Laufende Datums-/Uhrzeitanzeige

SELFHTML/Navigationshilfen Dynamisches HTML Beispiele für die Praxis
	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

SELFHTML/Navigationshilfen Dynamisches HTML Beispiele für die Praxis