 dynamische Uhrzeit 1 (mit Datum) (Layer oder DIV-Bereich)
Das Beispiel bietet die Möglichkeit der dynamischen Anzeige von Zeit und Datum in 4 Varianten. Die Position wird durch die X- und Y-Werte in Pixel, relativ zur oberen linken Ecke des Fensters festgelegt.
|
Eine aufwändige Möglichkeit zur Positionierung und Darstellung einer dynamischen Zeit- und Datumsanzeige. Hier wird abhängig vom erkannten Browser die Definition des Anzeigebereichs unterschiedlich definiert, um möglichst viele Browser zu 'bedienen'. Dazu wird die Unterstützung der Anweisungen 'document.layers', 'document.all' und 'document.getElementById' abgefragt. Außerdem ist dieses Scriptbeispiel in der Notierung wegen der mehrfachen Angaben für die Position fehlerträchtig. |
Anzeigeergebnis dynamisch:
HTML- und JavaScript-Beginnern empfehle ich den Einsatz von Beispiel 3 und 4.
Einfacher, nach den Aufbau der Seite den Inhalt noch einmal zu verändern, erscheint die Möglichkeit mit Hilfe eines Formularfeldes, in dem die dynamischen Daten angezeigt werden. Dazu habe ich ein Beispiel erstellt:  Uhrzeit dynamisch 3 |
Das JavaScript ermittelt laufend die aktuelle Zeit und schreibt regelmäßig (jede Sekunde) das Ergebnis in die HTML-Seite. Das Script ermittelt zusätzlich das aktuelle Datum und den Wochentag. Auch diese Ergebnisse werden (wenn sie möchten) in die HTML-Seite geschrieben.
Aufwand
1) CSS-Anweisungen im Head notieren
2) JavaScript-Anweisungen im Head notieren
3) Funktionsaufruf im Body notieren
4) X - Y Positionen anpassen
5) Auswahl der Anzeigeoption (Wochentag, Datum, Zeit)
Anzeigeoptionen
Im Javascript können sie durch die Auswahl der Werte welche in die Variable 'DispString' geschrieben werden festlegen, welche Informationen angezeigt werden sollen:
// 4 Anzeigemöglichkeiten:
// 1 für Anzeige der Zeit
// var DispString = TimeNow;
// 2 für Anzeige Datum + Zeit
// var DispString = DateNow + " " + TimeNow;
// 3 für Anzeige Wochentag + Zeit
// var DispString = DayName[DOW] + " " + TimeNow;
// 4 für Anzeige Wochentag + Datum + Zeit
var DispString = DayName[DOW] + " " + DateNow + " " + TimeNow;
Hier, auf dieser Beispielseite ist die 3. Option ausgewählt. Setzen / entfernen sie die beiden Slashes entsprechend.
im Head:
Die Formatierung wird mittels Style-Angaben festgelegt
Die Position wird mittels Style-Angaben und parallel dazu in Variablen des Scripts festgelegt
CSS-Definition
<style type="text/css">
<!--
#uhr {
font-family:Verdana;
font-size:12px;
color:#AF00FF;
position:absolute;
left:20;
top:380;
}
-->
</style>
Variablen für die X-Y-Position (rot) im Script
var hoehe = 20; // Höhe
var breite = 300; // Breite
var links= 20; // X-Pos
var oben= 380; // Y-Pos
Im Body-Bereich: Aufruf der Funktion Anzeige()
Die Definition des Anzeigebereichs wird vom JavaScript abhängig vom verwendeten Browser unterschiedlich geschrieben. Das erledigt die Funktion Anzeige(). Der Aufruf kann gleich nach dem BODY-Tag notiert werden.
<script type="text/javascript" language="JavaScript">
<!--
Anzeige()
//-->
</script>
Nach der Untersuchung des verwendeten Browsers wird mittels JavaScript, abhängig vom erkannten Browser, der entsprechende Code geschrieben. Es wird entweder ein <div>-Bereich oder ein Layer definiert.
if (document.getElementById)
...
if (document.layers)
...
if (document.getElementById&&!document.all)
...
Anpassungen für die Position
Zur Anpassung der Position für die dynamische Anzeige ersetzen sie die X-Y-Werte mit den passenden Angaben. Hier sind die Werte mit 20 (linker Abstand) und 380 (von oben) festgelegt. Diese beiden Zahlenwerte finden sie im CSS- und JavaScript-Bereich.
| Element |
hier im Beispiel |
ersetzen mit |
| Position von links |
20 |
Wert in Pixel |
| Position von oben |
380 |
Wert in Pixel |
|
Die Positionswerte finden sie in der CSS-Notierung und in den Variablen des Scripts.
In dieser überarbeiteten Versoin vom 04.07.2007 habe ich die Wertangaben für Position, Breite und Höhe in Variablen abgelegt und im Quellcode gleich unter den CSS-Angaben notiert. So können sie die identischen Werte für die X-Y-Position im Script und CSS-Code übersichtlicher angleichen.
Grundsätzliche Erklärungen zum date()-Objekt und den Möglichkeiten die Informationen für Datum und Zeit in Scripten weiter zu verarbeiten, finden sie auf der Seite
 Datum Einführung 02 - Übersicht
Die Möglichkeit Datum und Uhrzeit lediglich sttisch anzeigen zu lassen, erkläre ich auf einer eigenen Seite. Dort gibts die Wahl zwischen 4 Darstellungsmöglichkeiten und ich zeige Beispiele zur Formatierung und Anwendung.
Datum und Uhrzeit statisch darstellen
|
WWW.WEB-TOOLBOX.NET
Demo
ZURÜCK