SELFHTML

Laufende Datums-/Uhrzeitanzeige

Informationsseite

nach unten Hinweise zu diesem Beispiel
nach unten Quelltext mit Erläuterungen

Beispiel-Seite Anzeigebeispiel: So sieht's aus

 nach unten 

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 Seite DHTML-Bibliothek, um das zu leisten, was in dem Beispiel an dynamischem HTML erforderlich ist.

nach obennach unten

DOM 1.0JavaScript 1.2Netscape 4.xMS IE 4.0Opera 7Mozilla Firefox 1Konqueror 3.1Safari 1.0 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:

Beispiel-Seite Anzeigebeispiel: So sieht's aus (Seite 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 Seite 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 Seite 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 Seite Array für die deutschen Wochentage definiert. Anschließend ermittelt die Funktion mit Hilfe des Seite 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.

 nach oben
weiter Seite Bilderbuch zum Umblättern
zurück Seite Dynamische Navigationsleiste
 

© 2005 Seite Impressum