Uhr digital
 HomeZeit • digitale Uhr 01 Demo01  Quellcode01  Demo02  DOWNLOAD 

Digitale grafische Uhr 01

Eine simple stilvolle Uhr mit 24 Stunden Zeitanzeige. Funktioniert in allen Browsern und eignet sich für unterschiedliche Anwendungen. Eine dynamische Zeitanzeige wird über den Tausch der Grafiken für die Ziffern der digitalen Uhr im Sekundentakt visualisiert.
uhr digital zifferngrafik uhrzeit time dynamisch

dynamische Uhr - digitale grafische Anzeige


Oben sehen Sie die Darstellung einer Zeitanzeige vor dem Ausschnitt einer Europakarte (Creative Commons, Wikimedia). Ich habe innerhalb der Box für die Kartendarstellung eine weitere Box für die Uhr definiert, die ich mit CSS-Angaben an fester Position oben rechts platziere (top:35px; left:290px;).


Die digitale Uhr in einer Box

Für die Anzeige definiere ich einen DIV-Bereich mit der ID 'UhrBox' an der Stelle, wo die Zeitinformation angezeigt werden soll. Innerhalb der Box habe ich die 8 Grafiken für die Zeitdarstellung notiert.

Eine Einbindung der Grafiken in einen Div-Bereich wäre nicht unbedingt erforderlich, gibt mir aber bei der Formatierung der Uhr weitere Gestaltungsmöglichkeiten, z. B. zur Positionierung (erste Demo oben mit Karte) oder für eine Hintergrund- oder Randformatierung.

Zur Anschauung zeige ich das Uhrenmodul mit unterschiedlichen Formatierungen und Zifferngrafiken: In der zweiten aktiven Demo oben hat die Box einen blauen 1-Pixel Rand. In der aktiven dritten Demo weiter unten erkennen Sie eine hellgraue Hintergrundfarbe der Box bei transparenten Zifferngrafiken. Die vierte Demo zeigt weiße Zifferngrafiken auf schwarzem Grund.


Was erfahren Sie auf dieser Seite?

Ein Register (array) für die URLs von Grafiken anlegen
Sekunden-, Minuten- und Stundeninfo einem Date-Objekt entnehmen
Mit 'document.getElementById' die Datenquellen für Grafikelemente ändern
Mit 'setTimeout' zeitgesteuerte Aktionen auslösen



Die digitale Uhr 01 - Ziffern 15 × 20 Pixel

Für die digitale Uhr sind innerhalb des DIV-Bereichs 'UhrBox' sechs Zifferngrafiken und zwei Trennzeichen (Doppelpunkt) vorgesehen. Je 2 Zifferngrafiken für die Stunden-, Minuten- und Sekundendarstellung.

Im Sekundenabstand wird die Anzeige aktualisiert / die Grafiken werden ausgetauscht. Die Zifferngrafiken haben die Abmessung 15 × 20 Pixel und sind transparent. Als Trennzeichen (Doppelpinkt) verwende ich eine Grafik von 11 × 20 Pixel. Die Hintergrundfarbe habe ich hier mit grau (#EFEFEF) festgelegt.


so funktioniert's

Jede der 6 Zifferngrafiken hat eine ID (z0 bis z5) über die ich die Grafiken gezielt ansprechen (und austauschen) kann. Die Werte für die aktuelle Zeit werden der Systemzeit des lokalen Rechners entnommen. Den einzelnen 6 Zeichen für die Sekunden-, Minuten und Stundenwerte wird die Datenquelle für die entsprechenden Grafiken zugeordnet.

Das bedeutet z.B. um 23:03:25 Uhr wird der 6. Grafik die Datenquelle für die GrafikZiffer '5' zugeordnet.



Für den Einer-Sekundenwert wird dann die GrafikZiffer 5 angezeigt. Eine Abfrage im Sekundentakt aktualisiert die Anzeige und die nächste angezeigte Grafik wäre die '6'.



Aufwand für den Webmaster

1) Script und CSS-Anweisungen in den Head-Bereich kopieren
2) DIV-Bereich mit den Platzhaltern in den Body kopieren
3) Grafiken im vorgesehenen Ordner abspeichern


   Die Uhren-Box im Body

Nachdem Sie das JavaScript und die CSS-Anweisungen im Head-Bereich notiert und die Grafiken abgespeichert haben, muss der HTML-Code zur Anzeige des Counters noch im Body-Bereich notiert werden. Sie tragen den HTML-Code für die 'UhrBox' an genau der Stelle ein, wo der Counter erscheinen soll.

<div id="UhrBox">
hier werden die 8 Grafiken notiert
</div>


   Script-Code (Auszug) und CSS im Head-Bereich

Damit das Script weiß wo die Zifferngrafiken zu finden sind lege ich ein Register (Array) an. Ich notiere die URL der Grafiken im Array 'DigitsArr'. Grafiken für die Ziffern 0 - 9 sind im Array eingetragen. Die Zifferngrafiken sind bei diesem Beispiel im Unterordner 'ziffern7' abgelegt.
// Array der verwendeten Zifferngrafiken
var DigitsArr = new Array();
DigitsArr[0] = "ziffern7/0.gif";
DigitsArr[1] = "ziffern7/1.gif";
DigitsArr[2] = "ziffern7/2.gif";
DigitsArr[3] = "ziffern7/3.gif";
DigitsArr[4] = "ziffern7/4.gif";
DigitsArr[5] = "ziffern7/5.gif";
DigitsArr[6] = "ziffern7/6.gif";
DigitsArr[7] = "ziffern7/7.gif";
DigitsArr[8] = "ziffern7/8.gif";
DigitsArr[9] = "ziffern7/9.gif";

CSS-Anweisungen für den DIV-Bereich 'UhrBox'.

Für die AnzeigeBox, in der die Ziffern angezeigt werden, habe ich die Formatierungen in einer eigenen Klasse mit der ID 'UhrBox' festgelegt. Hier kann man die Hintergrundfarbe, den Innenabstand (padding) oder die Randformatierung festlegen.
#UhrBox {
position: relative;
top: 0px;
left: 0px;
width: 130px;
height: 30px;
background-color: #EFEFEF;
padding: 5px;
border: none;
}



Die digitale Uhr anpassen

Alternative Darstellungen sind durch Austausch der Ziffern-Grafiken und Anpassung der Formatierungen für die UhrBox möglich. Ihrer Phantasie sind da keine Grenzen gesetzt.

Wenn Sie alternative Grafiken verwenden, müssen die Angaben im Register ('DigitsArr') und die Notierung der Startgrafiken im Body-Bereich entsprechend angepasst werden.
#UhrBox {
position: relative;
top: 0px;
left: 0px;
text-align: center;
width: 280px;
border: none;
padding: 10px;
background-color: #000000;
}
Zwei Varianten habe ich bereits für Sie vorbereitet!

Variante mit Ziffern 11 x 14 Pixel

Variante mit Ziffern 34 x 50 Pixel  (oben weiße Nummern auf schwarzem Grund)



a)  Positionierung

Da ich für die Anzeige einen DIV-Bereich vorgesehen habe, stehen Ihnen für die Formatierung des Anzeigebereichs der Uhr weitere Gestaltungsmöglichkeiten zur Verfügung. Sie können die Größe, Hintergrundfarbe (background-color), den Rand oder den Innenabstand (padding) nach eigenen Vorstellungen anpassen. Auch die Einbindung einer Hintergrundgrafik wäre möglich.

Über die ID der Div-Box ist es ebenso möglich die gesamte Box mit CSS-Anweisungen zu positionern. Eine Anordnung links oder rechts, an fester oder relativer Position steht Ihnen frei.
#UhrBox {
float: right;
margin-left: 20px;
text-align: center;
width: 280px;
border: none;
padding: 10px;
background-color: #000000;
}
Die gesamte Box können Sie behandeln wie z.B. eine einzelne Grafik. CSS-Angaben für rechte / linke Ausrichtung




b)  alternative Zifferngrafiken

Für die digitale Uhr benötigen Sie 11 Grafiken die Sie selbst herstellen oder einer freien Quelle entnehmen. Die für dieses Modul benötigten Grafiken sind in der ZIP-Datei enthalten und im Unterordner mit der Bezeichnung 'ziffern7' abgelegt (Link im Kopfbereich).

Alternative Darstellungen der Uhr sind durch Austausch der Ziffern-Grafiken und Anpassung der Formatierungen für die UhrBox möglich. Ihrer Phantasie sind da keine Grenzen gesetzt. Wenn Sie alternative Grafiken verwenden, müssen die Angaben im Register ('DigitsArr') und die Notierung der Startgrafiken (Breite + Höhe) im Body-Bereich gegebenenfalls angepasst werden.

Wenn Sie möchten, können Sie also eigene Varianten der Darstellung mit diesen Grafiken erstellen.




Ziffern-Grafiken kostenlos in meiner Mini-Image-Box

Das Angebot hier deckt sich in etwa mit den bereitgestellten Ziffengrafiken auf meiner Seite 'Mini-Image-Box' (Abhängig vom Update). Dort können Sie etwa 9000 Mini-Grafiken für Ihre Webseite herunter laden.

Ich habe unterschiedliche Sätze digitaler Ziffern zum Download hochgeladen. Die Auswahl soll später noch erweitert werden. Wenn sie möchten, können Sie also weitere, eigene Varianten des Counters mit diesen Grafiken erstellen. Grafiken für meine Counter, Datums- und Zeitanzeigen finden Sie auf meiner Webseite Mini-Image-Box.

Eine große Auswahl selbst erstellter Symbole und Mini-Grafiken finden Sie in meiner Mini-Image-Box, die Grafik-Werkstatt der Web-Toolbox. Die Auswahl umfasste 2016 bereits 9000 Grafiken.

⏵Mini-Image-Box - kostenlose Grafiken  

⏵Mini-Image-Box - Ziffern-Grafiken  


Grafiken für meine Counter, Datums- und Zeitanzeigen finden Sie auch innerhalb der Web-Toolbox auf der Seite

Zifferngrafiken

Auszug der angebotenen Grafiken:

Für die Herstellung der beiden Sätze 'Nr. 8' und 'Nr. 6' gab es einen dringenden Bedarf finde ich. In den freien Bildquellen sucht man sehr kleine Ziffern oft vergeblich.


 Grafiken 0- 9Grafik 11 transparent
Ziffernsatz 2 nein
Bsp. Anzeige
Grafiken 16 × 21 Pixel
Ziffernsatz 6 nein
Bsp. Anzeige
Grafiken 11 × 14 Pixel
Ziffernsatz 7 ja
Bsp. Anzeige
Grafiken 15 × 20 Pixel
Ziffernsatz 8 ja
Bsp. Anzeige
Grafiken 11 × 14 Pixel





c)  Hintergrundfarben

Durch Austausch der Grafiken und Änderung der Angaben zur Hintergrundfarbe, Randformatierung und geänderten Angaben zum Innen- und Außenabstand wäre eine noch individuellere Anpassung an Ihre Seite möglich.


 Ziffern 0.gif - 9.gif : 11.gif transparent
Ziffernsatz 2 nein
Anzeige
Ziffernsatz 7 ja
Anzeige
Hintergrund blau
Ziffernsatz 8 ja
Anzeige
Hintergrund gelb
Ziffernsatz 6 nein
Anzeige






Das könnte Sie auch interessieren: