Uhr digital
 HomeZeit • digitale Uhr 01-A Ziffern Nr. 8  Quellcode   drucken  Seite drucken

Digitale Uhr 01-A Minivariante

Hier zeige ich nichts Neues. Lediglich eine Version der Digitalen Uhr 01 mit anderen (kleineren) Grafiken. Den Quellcode für die Mini-Variante der Uhr können sie ohne Änderungen für die Eintragung der kleineren Ziffern übernehmen.
uhr digital zifferngrafik uhrzeit time dynamisch

Mini-Variante der digitalen Uhr 01 (Ziffern: 11 × 14 Pixel)

Die 8 Grafiken der Uhr stehen in einem DIV-Bereich mit der ID 'UhrBox'. Die Box ist dort notiert, wo die Uhr angezeigt werden soll. Eine Einbindung in einen Div-Bereich gibt mir bei der Formatierung der Uhr zusätzliche Gestaltungsmöglichkeiten, z. B. Hintergrund- oder Randformatierung. In der aktiven Demo erkennen Sie eine hellgraue Hintergrundfarbe der Box. In der inaktiven zweiten Demo weiter unten hat die Box einen violetten 1-Pixel Rand.

Für die digitale Uhr sind innerhalb des DIV-Bereichs 'UhrBox' sechs Zifferngrafiken und zwei Trennzeichen (Doppelpunkt) vorgesehen. Eingesetzt werden Ziffern-Grafiken mit den Abmessungen 11 × 14 Pixel. Je 2 Zifferngrafiken für die Stunden-, Minuten- und Sekundendarstellung. Als Trennzeichen (Doppelpinkt) verwende ich eine Grafik von 5 × 14 Pixel. Im Sekundenabstand wird die Anzeige aktualisiert / die Grafiken werden ausgetauscht.



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




So funktioniert's

Jede der 6 Zifferngrafiken hat eine ID (z0 bis z5) über die ich die Grafik gezielt ansprechen (und austauschen) kann. Die Werte für die aktuelle Zeit werden der Systemzeit des lokalen Rechners entnommen. Den einzelnen Zeichen für Sekunden-, Minuten und Stundenwerte wird die Datenquelle für die entsprechenden Grafiken zugeordnet. Das bedeutet z.B. um 23:03:25 Uhr wird dem Sekundenwert '5' die Datenquelle für die GrafikZiffer '5' zugeordnet.

Für den Sekundenwert wird dann die GrafikZiffer 5 angezeigt. Eine Abfrage im Sekundentakt aktualisiert die Anzeige.



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 für die Ziffern 0 - 9 in diesem Array mit der Bezeichnung 'DigitsArr'. Die Datenquelle der Grafiken (URL) und Pfad der Pfad (ziffern8) sind eingetragen. Die Zifferngrafiken sind bei diesem Beispiel im Unterordner 'ziffern8' abgelegt.
// Array der verwendeten Zifferngrafiken
var DigitsArr = new Array();
DigitsArr[0] = "ziffern8/0.gif";
DigitsArr[1] = "ziffern8/1.gif";
DigitsArr[2] = "ziffern8/2.gif";
DigitsArr[3] = "ziffern8/3.gif";
DigitsArr[4] = "ziffern8/4.gif";
DigitsArr[5] = "ziffern8/5.gif";
DigitsArr[6] = "ziffern8/6.gif";
DigitsArr[7] = "ziffern8/7.gif";
DigitsArr[8] = "ziffern8/8.gif";
DigitsArr[9] = "ziffern8/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: 90px;
text-align: center;
background-color: #FFFFFF;
padding: 3px;
border: 1px solid #8F8F8F;
}





Digitale Uhr (mini) 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 Script ('DigitsArr') und die Notierung der Startgrafiken im Body-Bereich entsprechend angepasst werden. Hier verwende ich grüne digitale Ziffern auf schwarzem Grund.
#UhrBox {
position: relative;
top: 0px;
left: 0px;
width: 90px;
text-align: center;
border: none;
padding: 3px;
background-color: #000000;
}

background:#FEE237

border:1px solid

border:3px double

padding:2px



11 Grafiken für die Darstellung

Die für dieses Beispiel benötigten Grafiken können Sie als ZIP-Datei herunterladen und in einem neuen Ordner 'ziffern8' ablegen (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.


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





Das könnte Sie auch interessieren: