Uhrzeit dynamisch 4
 HomeZeit • Uhrzeit dynamisch 04 Demo  ScriptCode   drucken  Seite drucken

dynamische Uhrzeit 4  (Anzeige im DIV-Bereich)

Das Beispiel bietet die Möglichkeit zur dynamischen Anzeige der Zeit. Die Anzeige erfolgt in einem 'unsichtbaren' Formularfeld. Erweiterung des Moduls 3 mit mehreren unterschiedlichen Anzeigemöglichkeiten. Auch die Technik der Anzeige wurde geändert.
uhrzeit wochentag datum textzeichen dynamisch

Datum und Uhrzeit dynamisch anzeigen - 3 Möglichkeiten

Demo der 3 Anzeigeoptionen für Datum und / oder Zeit die Sie mit diesem Modul erzeugen können. Welche Anzeige Sie wünschen bestimmen Sie mit einem "Schalter", den Sie auf 1, 2 oder 3 setzen. Dazu notieren Sie für die Variable 'WelcheAnzeige' die entsprechende Ziffer.

Starttext

Starttext

Starttext

Anzeigeoption 1: dynamische Zeitanzeige (hh:mm:ss)
Anzeigeoption 2: aktueller Wochentag + Datum + dynamische Zeitanzeige
Anzeigeoption 3: aktueller Wochentag + dynamische Zeitanzeige


   Anzeigetechnik

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 dann mit Hilfe von CSS-Angaben (für den Rand) 'unsichtbar', na ja als solches nicht mehr erkennbar, angezeigt. Diese Möglichkeit wurde häufig eingesetzt, ist aber nicht mehr zeitgemäß.

Heute lösen wir das mit einem DIV-Bereich für den man die Inhalte (das was zwischen dem einleitenden und schließenden <DIV>-Tag steht) dynamisch ändert. Das wird mit 'innerHTML' umgesetzt.

Ich definiere also einen DIV-Bereich für die Anzeige an der Stelle, wo die Information angezeigt werden soll. Dem DIV-Bereich gebe ich eine ID (DatumZeitAnzeige) über den ich den Bereich gezielt ansprechen kann. Für die Demo habe ich hier in den DIV-Bereich den Text 'Starttext' vorgesehen. Der Bereich kann aber auch leer bleiben.
<div id="DatumZeitAnzeige">Starttext</div>
Mit einer JavaScript-Anweisung kann ich den Inhalt des DIV-Bereichs nun ändern:
document.getElementById('DatumZeitAnzeige').innerHTML = "neuer Text";
In diesem Modul ersetze ich den zu Begin (beim Laden der Seite) zunächst angezeigten Text nach einem kurzen Delay durch die aktuelle Uhrzeit / die Uhrzeit + Datum. Den Vorgang wiederhole ich jede Sekunde und erhalte so eine dynamische Anzeige der Zeit.

Starttext

Die Ausrichtung im hier 380 Pixel breiten DIV-Bereich ist zentiert!


Die aufwendige und fehlerträchtige Notierung eines Formularfeldes und die genaue Position der Anzeige (die ja für möglichst viele Browser passen soll) entfällt hier. Die Anzeige erscheint Innerhalb Ihrer Seite dort, wo der DIV-Bereich für die Anzeige notiert wurde.

Das JavaScript ermittelt laufend die aktuelle Zeit und schreibt regelmäßig (jede Sekunde) das Ergebnis in den DIV-Bereich. 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 für den Webmaster

1) JavaScript-Anweisungen im Head notieren
2) CSS-Anweisungen im Head notieren
3) HTML-Code für den DIV-Bereich im Body notieren
4) Auswahl der Anzeige festlegen
5) optional Farben und Darstellung anpassen



   Art der Anzeige festlegen

Ich definiere im JavaScript 3 Variablen welche unterschiedliche Informationen enthalten. Setzen Sie den 'Schalter' für die gewünschte Anzeige, indem Sie die entsprechende Ziffer als Wert für die Variable 'WelcheAnzeige' eintragen.
// hier die Anzeigeoption wählen 1, 2 oder 3
var WelcheAnzeige = 3;
3 Anzeigemöglichkeiten:

1 = aktuelle Zeit (hh:mm:ss) Inhalt der Variablen AnzeigeString01
2 = aktueller Wochentag + Datum + Zeit Inhalt der Variablen AnzeigeString02
3 = aktueller Wochentag + Zeit Inhalt der Variablen AnzeigeString03



   Gestaltung der Darstellung:

Die generelle Formatierung des DIV-Bereich und dessen Inhalte wird mit Style-Angaben im CSS-Block für 'DatumZeitAnzeige' festgelegt. Sie können Farben und Textgrößen für die Darstellung und die Formatierung für den eigentlichen Anzeigebereich anpassen (Rand, Größe, Hintergrund, ...).

CSS-Definition im Head
<style type="text/css">
<!--

#DatumZeitAnzeige {
position: relative;
top: 0px;
left: 0px;
width: 380px;
border: 0px solid #000000;
margin: 0px;
padding: 5px;
background-color: #7F7F7F;
text-align: center;
color: #FFFFFF;
font-family: Arial,Helvetica,sans-serif;
font-size: 14px;
}

-->
</style>






Das könnte Sie auch interessieren: