Uhrzeit dynamisch 3
 HomeZeit • Uhrzeit dynamisch 03 Demo  Quellcode   drucken  Seite drucken

dynamische Uhrzeit 03  (Text)

Das Beispiel bietet die Möglichkeit zur dynamischen Anzeige der Zeit. Die Anzeige erfolgt in einem Div-Bereich. Die Anzeige können Sie nicht nur fablich an Ihr Design anpassen. Legen Sie Textgröße, Position oder eine Hintergrundgrafik für die Darstellung fest.
uhr digital textzeichen uhrzeit time dynamisch

Uhrzeit in einem <DIV>-Bereich anzeigen

UPDATE   Modul völlig überarbeitet!

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 sollen. Das Formularfeld müsste man mit entsprechenden CSS-Angaben für den Rand 'unsichtbar', also nicht mehr als solches erkennbar formatieren.

Eine andere Möglichkeit bietet die Technik mit 'innerHTML'. Hiermit kann man den Inhalt zwischen zwei HTML-Tags verändern. Bei meiner Uhr 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 in allen neuen Browsern funktioniert.
<div id="ZeitAnzeige">00:00:00 Uhr</div>
document.getElementById("ZeitAnzeige").innerHTML = ...

00:00:00 Uhr
00:00:00 Uhr
00:00:00 Uhr


Das JavaScript ermittelt laufend die aktuelle Zeit und schreibt regelmäßig (jede Sekunde) das Ergebnis in den Div-Bereich. Wenn sie zusätzlich das aktuelle Datum und/oder den Wochentag anzeigen möchten, werfen sie doch einmal einen Blick auf das Beispiel dynamische Uhrzeit 04.

Die aufwendige und fehlerträchtige Notierung für die Position der Anzeige über andere Techniken umgeht man hier. Die Anzeige erscheint auf ihrer Seite dort, wo der Div-Bereich notiert wurde. Die Formatierung für den Anzeigebereich und den Text für die Uhrzeit erfolgt über CSS-Anweisungen.


Aufwand für den Webmaster

1) CSS-Anweisungen im Head-Bereich Ihres Dokuments notieren
2) JavaScript-Anweisungen im Head-Bereich Ihres Dokuments notieren
3) Div-Bereich im Body-Bereich Ihres Dokuments notieren
4) optional: Farben und Darstellung anpassen



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'



Gestaltung mit CSS

Die Formatierung wird mittels Style-Angaben für input-Textfelder der Unterklasse 'anzeige' festgelegt. Im Block '#ZeitBox03' können Sie Farben und Formatierungen für die AnzeigeBox festlegen. Im Block '#ZeitAnzeige' können Sie Textformatierungen für den Text festlegen.

Um mir weitere Möglichkeiten zur Formatierung zu erschließen habe ich die 'ZeitAnzeige' noch einmal mit einem weiteren Div-Bereich (ZeitBox03) umschlossen. Für die Funktion ist das ohne Belang.

<div id="ZeitBox03"><div id="ZeitAnzeige">00:00:00 Uhr</div></div>
CSS-Definition im Head
<style type="text/css">
<!--

#ZeitBox03 {
position: relative;
top: 0px;
left: 0px;
width: 150px;
height: 26px;
margin: 0px;
padding: 0px;
border: 1px solid #000000;
}

#ZeitAnzeige {
position: absolute;
top: 0px;
left: 0px;
background: transparent;
width: 150px;
line-height: 26px;
text-align: center;
color: #000000;
font-family: Arial,Helvetica,sans-serif;
font-size: 14px;
font-weight: bold;
}

-->
</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






Das könnte Sie auch interessieren: