Web-Toolbox JavaScript Zeit digitale Uhr grafische Ziffern

Clock - dynamische digitale Uhr

Uhr mit grafischen Ziffern - Web-Toolbox

Eine dynamische Anzeige der aktuellen Uhrzeit für Ihre Seite. Im HTML-Dokument sind acht Grafiken für eine Zeitanzeige notiert. Abhängig von der aktuellen Uhrzeit werden entsprechende Grafiken angezeigt bzw. im Sekundentakt ausgetauscht. Eine simple stilvolle Uhr mit 24 Stunden Zeitanzeige. Funktioniert in allen Browsern und eignet sich für unterschiedliche Anwendungen. Die dynamische Zeitanzeige wird über den Austausch der Grafiken der digitalen Uhr im Sekundentakt visualisiert.

Rubrik Zeit
Jede der 6 Zifferngrafiken hat eine ID (z0 bis z5) über die ich jede einzelne Grafik gezielt ansprechen (und austauschen) kann.

Die Werte für die aktuelle Zeit werden der Systemzeit des lokalen Rechners entnommen. Die 6 Zahlenwerte für Sekunden (2), Minuten (2) und Stunden (2) werden vom Script berechnet, zugeordnet und für die Grafiken werden dann entsprechende neue Datenquellen festgelegt.


Das bedeutet z.B. um 23:03:25 Uhr wird dem Einerwert für Sekunden '5' die Datenquelle für die Grafik-Ziffer '5' zugeordnet [5.png]. Dem Zehnerwert für Sekunden '2' wird die Datenquelle für die Grafik-Ziffer '2' zugeordnet [2.png] usw. .


Kaffeepause - keine Ahnung wie lange es dauert

Die Grafiken zur Anzeige der Uhrzeit stehen in einem DIV-Bereich mit der ID 'UhrBox'. Die Einbindung in einen Div-Bereich gibt mir bei der Formatierung der Uhr zusätzliche Gestaltungsmöglichkeiten, z. B. für die Größe der Darstellung, der Hintergrundfarbe oder eine Randformatierung. Der HTML-Code der Box ist dort notiert, wo die Uhr angezeigt werden soll.

JavaScript-Code-Schnipsel für dieses Modul


Für Web-Worker und Scriptschreiber: Mit JavaScript haben Sie Einfluss auf das im Browserfenster angezeigte HTML-Dokument und die Möglichkeit auf Benutzeraktionen zu reagieren. Inhalte können abgefragt und die Darstellung der Seite kann verändert werden. Einige der in diesem Beispiel verwendeten Techniken zeige ich unten auf. Im Quelltext der Seite können sie den gesamten Zusammenhang erkennen.

Austausch der Zifferngrafiken
"Zeitstring" enthält die Info für Std Min Sek (00 00 00)
// Array der verwendeten Zifferngrafiken
var DigitsArr = new Array();
DigitsArr[0] = "ziffern/0.png";
DigitsArr[1] = "ziffern/1.png";
DigitsArr[2] = "ziffern/2.png";
DigitsArr[3] = "ziffern/3.png";
DigitsArr[4] = "ziffern/4.png";
DigitsArr[5] = "ziffern/5.png";
DigitsArr[6] = "ziffern/6.png";
DigitsArr[7] = "ziffern/7.png";
DigitsArr[8] = "ziffern/8.png";
DigitsArr[9] = "ziffern/9.png";

// Schleife zum Austausch der Datenquelle (src)
for (i=0; i < Zeitstring.length; i++) {
document.getElementById('z'+i).src = DigitsArr[Zeitstring.charAt(i)];
}

Quellcode JavaScript + CSS dynamische digitale Uhr

Ich verwende bei meinen Modulen eigene CSS-Klassen zur Positionierung und / oder Formatierung. Die CSS-Anweisungen werden im Head-Bereich notiert. Der JavaScript-Code für meine Lösungsvariante ist innerhalb einer JavaScript-Deklaration im Head-Bereich notiert oder in einer externen JS-Datei ausgelagert. Eine Textdatei mit dem Quellcode stelle ich, falls vorhanden, hier zum Download zur Verfügung.