 dynamische Uhrzeit 4
Das Beispiel bietet die Möglichkeit zur dynamischen Anzeige der Zeit. Die Anzeige erfolgt in einem 'unsichtbaren' Formularfeld.
Erweiterung des Beispiels 3 mit unterschiedliche Anzeigemöglichkeiten.
- aktuelle Zeit (hh:mm:ss)
- aktueller Wochentag + Datum + Zeit
- aktueller Wochentag + Zeit
|
Eine einfache Möglichkeit nach den Aufbau der HTML-Seite den Inhalt noch einmal zu verändern bietet sich mit Hilfe eines Formularfeldes, in dem die dynamischen Daten angezeigt werden. Das Formularfeld wird mit Hilfe von CSS-Angaben (für den Rand) 'unsichtbar', na ja als solches nicht mehr erkennbar. |
Die aufwendige und fehlerträchtige Notierung für die Position der Anzeige (die ja im Beispiel 1 und 2 für möglichst viele Browser passen soll) entfällt hier. Die Anzeige erscheint auf ihrer Seite dort, wo das Formular notiert wurde.
Das JavaScript ermittelt laufend die aktuelle Zeit und schreibt regelmäßig (jede Sekunde) das Ergebnis in das Formularfeld. 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) OnLoad im Body-Tag notieren
4) Formular im Body notieren
5) Auswahl der Anzeige festlegen
6) evtl. Farben und Textdarstellung anpassen
Art der Anzeige festlegen
Ich definiere im JavaScript 3 Variablen welche unterschiedliche Angaben enthalten. Wählen sie die entsprechende Variable für die Anzeige aus, indem sie die zutreffende Endnummer im JavaScript eintragen.
document.getElementById("Zeit").value = AnzeigeString03;
3 Anzeigemöglichkeiten:
| 1) aktuelle Zeit (hh:mm:ss) |
AnzeigeString01 |
| 2) aktueller Wochentag + Datum + Zeit |
AnzeigeString02 |
| 3) aktueller Wochentag + Zeit |
AnzeigeString03 |
Gestaltung der Darstellung:
Die generelle Formatierung des Formularfeldes wird mittels Style-Angaben für 'input' festgelegt. Im Block 'input.anzeige' können sie Farben und Textgrößen für die Anzeige noch einmal separat festlegen.
CSS-Definition im Head
<style type="text/css">
<!--
input {
color: #000000;
background: #FFFFFF;
border: none;
}
input.anzeige {
color: #FF0080;
background: #FFFFFF;
border: none;
font-weight:bold;
width:500px;
}
-->
</style>
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
ScriptCode 
ZURÜCK