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

dynamische Uhrzeit Variante 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 den Werten '0px' für beide Angaben erscheint die Anzeige am Ort der Notierung. Weitere Formatierung durch CSS-Angaben ist vorbereitet.
uhrzeit clock dynamisch datum wochentag Std Min Sek

Datum / Zeitanzeige im <div>-Bereich - 4 Anzeigeoptionen

UPDATE  14.02.2014  Modul überarbeitet, neue Demos

Eine dynamische Zeitanzeige für Ihre Seite, als Anzeige in einem Fließtext oder für die Vollbilddarstellung. Zusätzlich zur einfachen Darstellung der Uhrzeit haben Sie 3 weitere Optionen zur Auswahl:
  • Anzeige Datum + Zeit
  • Anzeige Wochentag + Zeit
  • Anzeige Wochentag + Datum + Zeit
Rechts sehen Sie die Mini-Vorschau einer Vollbilddarstellung wie in meiner Demo-02.


Anzeige mit 'innerHTML'

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.
<div id="ZeitAnzeige">00:00:00 Uhr</div>
document.getElementById("ZeitAnzeige").innerHTML = ...
Anzeigeergebnis bei der gewählten 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.


   4 Anzeigeoptionen

Sie können festlegen, welche Informationen angezeigt werden sollen:
  1. Anzeige der Zeit
  2. Anzeige Datum + Zeit
  3. Anzeige Wochentag + Zeit
  4. Anzeige Wochentag + Datum + Zeit
Legen Sie die gewünschte Option mit der Variablen 'DarstellungOption' fest.
// Option hier eintragen 1,2,3 oder 4
DarstellungOption = 3
Demo der Anzeige in 4 Varianten




Aufwand für den Webmaster

1) CSS-Anweisungen im Head notieren
2) JavaScript-Anweisungen im Head notieren
3) HTML-Code im Body notieren
4) evtl. Farben und Textdarstellung anpassen
5) Auswahl der Anzeigeoption (Wochentag, Datum, Zeit)


Im Body-Bereich
<div id="ZeitBox01"><div id="ZeitAnzeige">00:00:00 Uhr</div></div>

Das war's schon! Lassen Sie sich von den langen Erklärungen hier nicht abschrecken. 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.

Wenn Ihnen das als Einstieg ausreicht öffnen Sie die Quellcodeseite, kopieren den Code in Ihre Seite und experimentieren weiter.

Falls Sie mehr über Funktion und Anpassungen erfahren möchten, lesen Sie unten weiter.

Infos und Erklärungen zum 'Einbauen' von JavaScript finden Sie im JavaScript Menü 01 oder gezielt auf der Seite Kurzinfo JavaScript 'einbauen'





   Formatierung

Die Formatierung und Position wird mittels Style-Angaben festgelegt

Die Position der Anzeige wird in diesem Beispiel durch einen DIV-Container bestimmt, den Sie an genau der Stelle innerhalb 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:


Samstag 15.02.2014  08:34:59 Uhr


Um mir weitere Möglichkeiten 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. Aber ich kann das 'drumherum' nach Belieben gestalten. Ich kann die eigentliche Uhr vor einer Hintergrundgrafik, mit einem Extra-Rahmen oder farbig abgesetzt anzeigen lassen. Gestalten Sie Ihre Uhr z. B. wie eine App indem Sie ein schickes Foto als Hintergrund festlegen. Die Position der eigentlichen Zeitanzeige verschieben Sie durch Einträge bei den CSS-Angaben 'top: und left:' für '#ZeitAnzeige'.

Demo mit Hintergrundfoto anzeigen
dynamische Uhrzeitanzeige


HTML-Code 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;

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

}

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



   So funktonierts'

Im Script "baue" ich mir aus den Informationen die ich der Systemzeit entnehme zwei "vernüftige" Texte zusammen und speichere sie in Variablen:
  1. Für die Zeitinfo in der Variablen 'ZeitJetzt' (SS:MM:SS)
  2. Für die Datumsinfo in der Variablen 'DatumJetzt' (TT.MM.JJJJ)
Aus diesen beiden Infos könnte ich, zusätzlich mit dem Wochentag, 4 unterschiedliche Anzeigen generieren und optional anzeigen lassen:
var DispString1 = ZeitJetzt;
var DispString2 = DatumJetzt + "  " + ZeitJetzt;
var DispString3 = Wochentag[TagDerWoche] + "  " + ZeitJetzt;
var DispString4 = Wochentag[TagDerWoche] + " " + DatumJetzt + "  " + ZeitJetzt;


Fallunterscheidung mit 'switch' und 'case'

Ich möchte hier anders vorgehen und Ihnen bei dieser Gelegenheit die Arbeitsweise von 'switch' und 'case' aufzeigen. Mit 'switch' und 'case' kann man Fallunterscheidungen von mehr als 2 Zuständen untersuchen. Mit 'if' und 'else' gibt es bereits eine Entweder- Oder-Untersuchung, die man durch Verschachtelung auch für mehr als zwei Unterscheidungen einsetzen könnte, normalerweise aber nur 2 Situationen unterscheidet.

Mit 'switch' und 'case' bleibt eine Fallunterscheidung für mehrere Zustände oder Optionen sehr übersichtlich! Gearbeitet wird nach der Methode "gesetzt dem Fall, der Schalter steht auf x, dann ... "

Übertragen Sie das auf dieses Beispiel:

Gesetzt dem Fall, die Variable 'DarstellungOption' hat den Wert '3' dann ...
DarstellungOption = 3

switch (DarstellungOption) {
  case 1:
    // Anzeige der Zeit
    var DispString = ZeitJetzt;
    break;
  case 2:
    // Anzeige Datum + Zeit
    var DispString = DatumJetzt + "  " + ZeitJetzt;
    break;
  case 3:
    // Anzeige Wochentag + Zeit
    var DispString = Wochentag[TagDerWoche] + "  " + ZeitJetzt;
    break;
  case 4:
    // Anzeige Wochentag + Datum + Zeit
    var DispString = Wochentag[TagDerWoche] + " " + DatumJetzt + "  " + ZeitJetzt;
    break;
    }
Hier im Beispiel hatte ich für die Variable 'DarstellungOption' den Wert auf '3' gesetzt. In meiner Fallunterscheidung wird die 3. Option ausgewählt. Folglich wurden der Variablen DispString die Informationen für Wochentag und Zeit zugewiesen. Das Ergebnis:

Demo-Information

Ich "baue" also nicht alle 4 Datum-Zeit-Infos generell "zusammen" sondern generiere nur eine einzige Datum-Zeit-Info. Welche? Das ist abhängig von der Variablen 'DarstellungOption'





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.





Das könnte Sie auch interessieren: