 dynamische Uhrzeit 3 (Anzeige im Formularfeld)
Das Beispiel bietet die Möglichkeit zur dynamischen Anzeige der Zeit. Die Anzeige erfolgt in einem 'unsichtbaren' Formularfeld.
|
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. Wenn sie zusätzlich das aktuelle Datum und/oder den Wochentag anzeigen möchten, werfen sie doch einmal einen Blick auf das Beispiel 4.
Aufwand
1) CSS-Anweisungen im Head notieren
2) JavaScript-Anweisungen im Head notieren
3) Formular im Body notieren
4) evtl. Farben und Textdarstellung anpassen
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: #0070C0;
background: #FFFFFF;
border: none;
font-weight:normal;
font-size:18px;
font-family:Verdana, sans-serif;
}
-->
</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 statisch 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