Uhrzeit dynamisch 05
 HomeZeit • Uhrzeit dynamisch 05 Quellcode   drucken  Seite drucken

dynamische Uhrzeit 05  (DIV-Bereich)

Das Beispiel bietet die Möglichkeit der dynamischen Anzeige von Zeit und Datum in 4 Varianten. Die Position wird durch den DIV-Containers innerhab des BODY-Bereiches bestimmt. Eine Formatierung wird durch CSS erzielt.
zeitanzeige uhrzeit wochentag datum dynamisch

dyn. Zeitanzeige in 4 Varianten - Style-Angaben + <div>-Container


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.

Die Position der Anzeige wird in diesem Beispiel durch einen DIV-Container bestimmt, den sie an genau der Stelle innerhab ihres Dokuments notieren, wo die Anzeige erfolgen soll. Die Darstellung der Uhr wird durch Formatierungsanweisungen im CSS-Block für diesen Container bestimmt. So kann, abhängig von der Formatierung, die Uhr für eine Internetseite aber auch für ihre Browserstartseite oder für einen HTML-Bildschrimschoner eingesetzt werden. Siehe Beispiel unten:



Die CSS-Angaben im Head-Bereich für die große Uhr

<style type="text/css">
<!--

#Uhr05 {
position: relative;
height: 30px;
width: 500px;
border: 1px solid #000000;
text-align: center;
padding: 10px;
margin: 0px;
font-family: Tahoma,Arial,Helvetica,sans-serif;
color: #00E090;
font-size: 28px;
line-height: 100.1%;
background-color: #5F5F5F;
}

-->
</style>
Die Notierung des Div-Containers im Body für die große Uhr

<div id="Uhr05"></div>
Wie sie feststellen ist der Div-Container mit der ID 'Uhr05' zu Beginn noch leer. Erst durch das JavaScript lasse ich den Inhalt nach einer Zeitverzögerung dort hineinschreiben und später im Sekundentakt auffrischen. Das geschiet durch den Aufruf der Funktion 'UhrAnzeigen()', die im Head-Bereich der HTML-Seite notiert ist und die ganze Arbeit erledigt.





   Aufwand für den Webmaster

1) CSS-Anweisungen im Head notieren
2) JavaScript-Anweisungen im Head notieren
3) <div>-Container im Body notieren
5) Auswahl der Anzeigeoption (Wochentag, Datum, Zeit) im Script
4) evtl. Formatierungen anpassen



   Anzeigeoptionen

Im Javascript können sie durch die Auswahl der Werte welche in die Variable 'DispString1 bis DispString4' geschrieben werden festlegen, welche Informationen angezeigt werden sollen:

4 Anzeigemöglichkeiten:
var DispString1    // für Anzeige der Zeit

var DispString2    // für Anzeige Datum + Zeit

var DispString3    // für Anzeige Wochentag + Zeit

var DispString4    // für Anzeige Wochentag + Datum + Zeit
Der entsprechende String wird zur Anzeige gebracht:
// Anzeigeoption hier Eintragen
Uhr01.innerHTML = DispString1;



   Script im Head-Bereich

<script type="text/javascript" language="JavaScript">
<!-- Begin


// Array Wochentag
DayName = new Array(
"Sonntag","Montag","Dienstag","Mittwoch","Donnerstag","Freitag","Samstag");


function UhrAnzeigen()
{
 var SysDatumJetzt = new Date();
 var SysTag = SysDatumJetzt.getDate();
 var SysMonat = SysDatumJetzt.getMonth() + 1;
 var SysJahr = SysDatumJetzt.getFullYear();
 var SysStunden = SysDatumJetzt.getHours();
 var SysMinuten = SysDatumJetzt.getMinutes();
 var SysSekunden = SysDatumJetzt.getSeconds();
 var WochentagNr = SysDatumJetzt.getDay();
 var JetztWochentag = DayName[WochentagNr]

 //  für zweistellige Anzeige
 var JetztTag  = ((SysTag < 10) ? "0" : "") + SysTag ;
 var JetztMonat  = ((SysMonat < 10) ? ".0" : ".") + SysMonat;
 var JetztStd  = ((SysStunden < 10) ? "0" : "") + SysStunden;
 var JetztMin  = ((SysMinuten < 10) ? ":0" : ":") + SysMinuten;
 var JetztSec  = ((SysSekunden < 10) ? ":0" : ":") + SysSekunden;


 // Die Fragmente für die Anzeige Wochentag Datum Zeit

 // aktuelles Datum
 var JetztDatum = JetztTag + JetztMonat + "." + SysJahr;

 // aktuelle Zeit
 var JetztZeit = JetztStd + JetztMin + JetztSec + " Uhr";


   // Anzeigeoptoinen in 4 Variablen
   var DispString1 = JetztZeit;
   var DispString2 = JetztDatum + "  " + JetztZeit;
   var DispString3 = JetztWochentag + "  " + JetztZeit;
   var DispString4 = JetztWochentag + " " + JetztDatum + "  " + JetztZeit;

// Nummer der Anzeigeoption hier Eintragen: DispString1, DispString2, ...
Uhr01.innerHTML = DispString1;
setTimeout("UhrAnzeigen()", 1000);

}

window.setTimeout('UhrAnzeigen()',1000);

// -->
</script>






Das könnte Sie auch interessieren: