 dynamische Uhrzeit 01 (4 Anzeigeoptionen)
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 zum vorherstehenden Seitenelement festgelegt. Mit dem Werten 0 px für beide Angaben erscheint die Anzeige am Ort der Notierung. Formatierung durch CSS-Angaben.
|
|
Datum / Zeitanzeige im <div>-Bereich - 4 Anzeigeoptionen
UPDATE 06.02.2012 Modul völlig überarbeitet!
Ich arbeite nach dem Update dieses Moduls mit der Technik 'innerHTML'. Damit kann man den Inhalt zwischen zwei HTML-Tags verändern. Für meine Datum / Zeitanzeige sind das <div>-Tags. Ich definiere also einen Div-Bereich und gebe diesem Element eine ID. Über diese ID bin ich in der Lage, den Bereich gezielt anzusprechen (und Inhalte auszutauschen). Dazu verwende ich die 'getElementById-Funktion', die auf allen Browsern funktioniert.
<div id="ZeitAnzeige">00:00:00 Uhr</div>
document.getElementById("ZeitAnzeige").innerHTML = ...
Anzeigeergebnis dynamisch (gewählte Anzeigeoption: 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 für den Webmaster
1) CSS-Anweisungen im Head notieren
2) JavaScript-Anweisungen im Head notieren
3) Div-Bereich im Body notieren
4) evtl. Farben und Textdarstellung anpassen
5) Auswahl der Anzeigeoption (Wochentag, Datum, Zeit)
Bitte entnehmen Sie den gesamten Quellcode für dieses Beispiel der Textdatei (Link oben im Kopfbereich). Dort können Sie ebenfalls eine Demo- bzw. eine Beispieldatei abrufen. Infos und Erklärungen zum 'Einbauen' von JavaScript finden Sie im  JavaScript Menü 01 oder gezielt auf der Seite Kurzinfo JavaScript 'einbauen'
4 Anzeigeoptionen
Im Javascript können sie durch die Auswahl der Werte welche in die Variable 'DispString' geschrieben werden festlegen, welche Informationen angezeigt werden sollen:
DarstellungOption = 3
switch (DarstellungOption) {
case 1:
// Anzeige der Zeit
var DispString = TimeNow;
break;
case 2:
// Anzeige Datum + Zeit
var DispString = DateNow + " " + TimeNow;
break;
case 3:
// Anzeige Wochentag + Zeit
var DispString = DayName[DOW] + " " + TimeNow;
break;
case 4:
// Anzeige Wochentag + Datum + Zeit
var DispString = DayName[DOW] + " " + DateNow + " " + TimeNow;
break;
}
Hier, auf dieser Beispielseite ist die 3. Option ausgewählt. Setzen Sie den Variablenwert entsprechend.
Formatierung
Die Formatierung und Position wird mittels Style-Angaben festgelegt
Um mir weitere Möglichkeite zur Formatierung zu erschließen habe ich die 'ZeitAnzeige' noch einmal mit einem weiteren Div-Bereich (ZeitBox01) umschlossen. Für die Funktion ist das ohne Belang.
Im Body-Bereich
<div id="ZeitBox01"><div id="ZeitAnzeige">00:00:00 Uhr</div></div>
CSS-Definition im Head-Bereich
<style type="text/css">
<!--
#ZeitBox01 {
position:relative;
top:0px;
left:0px;
width:200px;
height:26px;
margin: 0px;
padding:0px;
border:none;
background-color: #0070C0;
}
#ZeitAnzeige {
position:absolute;
top:0px;
left:0px;
background:transparent;
width:200px;
line-height:26px;
text-align:center;
color:#FFFFFF;
font-family: Verdana,Arial,Helvetica,sans-serif;
font-size:12px;
font-weight:normal;
}
-->
</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 haben sie ebenfalls die Wahl zwischen 4 Darstellungsmöglichkeiten. Ich zeige Beispiele zur Formatierung und Anwendung.
Datum und Uhrzeit statisch darstellen
|
Home • Zeit • Uhrzeit dynamisch 01
Demo
