Web-Toolbox

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.
Avatar
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

Avatar 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


Avatar 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

Avatar 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.

Unten angekommen!

Diesmal nicht gefunden was sie suchten? Kommen sie doch später noch mal vorbei.

  Kaffeepause
  Impressum
  Datenschutz
 Webmaster

Sitemap

Übersicht mit Verweisen zu den Unterseiten die bereits überarbeitet wurden Sitemap

  nach oben
  vorherige Seite
  Sitemap
 Home

Keywords

CSS-Klassen JavaScript Script-Code Vorlagen Beispiel Modul Clock Fensterchen digitale Uhr Anzeige Uhrzeit Zeitanzeige Austausch Grafiken Array