SELFHTML/Quickbar
Dynamisches HTML
Lösungen für die Praxis SELFHTML/Quickbar
Dynamisches HTML
Lösungen für die Praxis
 |
Datums-/Uhrzeitanzeige |
|
|
 | |
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.
<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>
|
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)
|
