Uhrzeit dynamisch 2
 HomeZeit • Uhrzeit dynamisch 02 Demo-01  Demo-02  Demo-03  Quellcode 

Dynamische Uhrzeit 02  (im DIV-Bereich)

Dieses Beispiel 'Dynamische Uhrzeit 02' stellt die aktuelle Uhrzeit dynamisch innerhalb Ihrer Seite dar. Die aktuellen Werte für die Zeit werden dem System entnommen und über das Date()-Objekt ermittelt. Die Position der Anzeige wird durch X- und Y-Werte (in Pixel) relativ zum übergeordneten oder vorstehenden Seitenelement festgelegt.
uhr digital textzeichen uhrzeit time dynamisch

Uhrzeit dynamisch anzeigen

UPDATE  Scriptcode völlig überarbeitet


Dazu wird laufend (jede Sekunde) der aktuelle Stunden-, Minuten- und Sekundenwert ermittelt und das Ergebnis in die HTML-Seite geschrieben.

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 'getElementById', die in allen neuen Browsern funktioniert.
document.getElementById('UhrZeit1').innerHTML = Zeit02;

Sie können den Anzeigebereich farblich hinterlegen (linke Darstellung) oder einen Hintergrundgrafik einbinden (rechte Darstellung).

Die vorher aufwendige und fehlerträchtige Notierung für die Position der Anzeige, die für möglichst viele (auch ältere) Browser passen soll, entfällt nun. Die Anzeige erscheint auf Ihrer Seite dort, wo Sie den HTML-Code für die Uhr notieren.


   Aufwand für den Webmaster

1) CSS-Anweisungen in den Head-Bereich einkopieren
2) JavaScript-Anweisungen in den Head-Bereich einkopieren
3) HTML-Anweisungen (Div-Tags) im Body-Bereich notieren
4) Textformatierung anpassen (optional)
5) X- / Y-Position anpassen (optional)


   Codezeilen im Body-Bereich:

Für dieses Modul sollen folgende HTML-Anweisungen im Body-Bereich notiert werden: Der HTML-Code für zwei <div>-Bereiche
<div id="Box02">
<div id="UhrZeit1"></div>
</div>


   Darstellung CSS-formatiert

Die Formatierung der Anzeige habe ich erweitert! Für die etwas aufgepepptere Darstellung habe ich die Anzeige der eigentlichen Uhrzeit in einen alles umschließenden zweiten Div-Bereich (Box02) eingebunden. Für die Funktion ist das ohne Belang.

Das erschließt mir aber weitere Möglichkeiten zur Darstellung der Uhr. Ich kann das 'drumherum' nach Belieben gestalten und die eigentliche Uhr vor einer Hintergrundgrafik, mit einem Extra-Rahmen oder farbig abgesetzt anzeigen lassen. Soll Ihre Uhr z. B. wie eine App aussehen, legen Sie ein schickes Foto als Hintergrund für 'Box02' fest. Die Position der Zeitanzeige verschieben Sie durch Einträge bei den CSS-Angaben 'top: und left:' für 'UhrZeit1' an die passende Stelle.

Demo mit Hintergrundfoto anzeigen
dynamische Uhrzeitanzeige


a)  CSS-Anweisung für die Darstellung (Uhr oben links)

Die Schriftformatierung (Hintergrundfarbe, Textfarbe Schriftgröße) für die Darstellung der Uhrzeit wurden mit CSS-Angaben im Block '#UhrZeit1' festgelegt.
<style type="text/css">
<!--

#Box02 {
position: relative;
left: 0px;
top: 0px;
border: none;
width: 160px;
height: 40px;
background-color: #2F2F2F;

/*
oder mit Hintergundgrafik
background: url(foto-see.jpg);
*/

margin: 0px;
padding: 0px;
}

#UhrZeit1  {
position: absolute;
left: 0px;
top: 0px;
width: 160px;
text-align: center;
font-family: Verdana,sans-serif;
font-size: 22px;
color: #7DBEFF;
font-weight: bold;
line-height: 40px;
margin: 0px;
padding: 0px;
}

-->
</style>
b)  CSS-Anweisung für die rechte Darstellung (Uhr als Tischwecker)

Die alles umschließende Box (Wecker02) hat eine Hintergrundgrafik vor der (aus Betrachtersicht) die Uhrzeit dynamisch angezeigt wird. Die Größe der Box ist geanu an die Hintergrundgrafik angepasst. Textgröße und -farbe wurd entsprechend gewählt.
<style type="text/css">
<!--

#Wecker2 {
position: relative;
left: 0px;
top: 0px;
border: none;
width: 200px;
height: 95px;
background: url(uhr-200-01.png) #2F2F2F;
margin: 0px;
padding: 0px;
}

#UhrZeit2 {
position: absolute;
left: 0px;
top: 30px;
width: 200px;
text-align: center;
font-size: 38px;
font-weight: bold;
color: #DFDFDF;
line-height: 40px;
text-align: center;
font-family: Arial,Verdana,sans-serif;
margin: 0px;
padding: 0px;
}
-->
</style>




Das könnte Sie auch interessieren: