Armbanduhr
 HomeZeit • Armbanduhr download  Demo01  Demo02  Demo03  Quellcode 

Digitale Uhr mit Datum und Wochentag

Hier zeige ich nichts Neues. Lediglich eine erweiterte Version der digitalen Uhr 01-A. Den Quellcode für die Mini-Version der Uhr habe ich ohne Änderungen für die Anzeige der kleineren Ziffern übernommen. Eingesetzt werden Mini-Ziffern mit den Abmessungen 11 x 14 Pixel.
uhr clock digital dynamisch zeit datum wochentag

Dynamische Zeitanzeige vor einer Hintergrundgrafik

Das Modul für die digitale Uhr 01-A habe ich erweitert und wird als digitale Armbanduhr mit dynamischer Zeitanzeige umgesetzt. Für den Hintergrund habe ich mehrere Grafiken entworfen. Datums- und Zeitwerte aus der Systemvariablen date() wurden eingebunden.

Das aktuelle Datum und der Wochentag werden angezeigt, die Uhrzeit wird mit grafischen Ziffern dargestellt.

Die Hintergrundgrafik können Sie austauschen.
00:00:0000
Wochentag

Zur optischen Aufwertung setze ich hier die Hintergrundgrafik einer Armbanduhr ein. Die Anzeige für Datum, Uhrzeit und Wochentag erfolgt (für den Betrachter) vor der Grafik. Innerhalb der Div-Box für die gesamte Uhr wurden die Div-Boxen für die 3 Anzeigen mit CSS positioniert (absolute, top, left).

Aufbau der Anzeige für die Zeit

Armbanduhr dynamische digitale Uhr Neben dem Div-Bereich für die digitalen Ziffern (UhrZiffern) habe ich zwei Boxen für die Anzeige von Datum (UhrDatum) und Wochentag (UhrTag) vorgesehen. Die 8 Grafiken für die Zeitanzeige der digitalen Uhr stehen horizontal zentriert innerhalb des Div-Bereichs 'UhrZiffern'. Je 2 für Stunden-, Minuten- und Sekundendarstellung, getrennt durch eine Grafik für den Doppelpunkt.

Die Werte für die aktuelle Zeit werden der Systemzeit des lokalen Rechners entnommen. Eine Abfrage im Sekundentakt aktualisiert die Anzeige. Den Sekunden-, Minuten und Stundenwerten werden die entsprechenden Zifferngrafiken zugeordnet und ausgetauscht.

Eine Einbindung der gesamten Uhr in eigene Div-Box (UhrBox) gibt mir bei der Positionierung erweiterte Gestaltungsmöglichkeiten. Man könnte Hintergrundfarbe, Rand und auch den Abstand zu den umgebenden Seitenelementen mit CSS bestimmen.

Demo mit Hervorhebung der DIV-Bereiche ansehen



Aufwand für den Webmaster

1) Script und CSS-Angabenin den Head-Bereich kopieren
2) HTML-Code in den Body-Bereich kopieren
3) die Uhrengrafik im Seitenverzeichnis ablegen
4) die Zifferngrafiken in den Unterordner 'ziffern6' kopieren



Anpassungen

00:00:0000
Wochentag
Für die Zeitanzeige im ersten Beispiel oben habe ich grüne Zifferngrafiken auf schwarzem Grund gewählt.



Alternative Grafiken können Sie als ZIP-Datei herunterladen. Durch die Auswahl anderer Grafiken und CSS-Angaben wären auch abweichende Darstellungen möglich.

Demo 02 mit alternativer Hintergrundgrafik ansehen
Demo 03 mit alternativer Hintergrundgrafik ansehen

Tragen Sie die dazu notwendigen Angaben für die Ziffern-Grafiken im Script (Array) und dem HTML-Code ein. Die Hintergrundgrafik wird im CSS-Block für 'UhrBox' eingetragen.

var imgarr = new Array();
imgarr[0] = "ziffern6/0.gif";
imgarr[1] = "ziffern6/1.gif";
imgarr[2] = "ziffern6/2.gif";
imgarr[3] = "ziffern6/3.gif";
imgarr[4] = "ziffern6/4.gif";
imgarr[5] = "ziffern6/5.gif";
imgarr[6] = "ziffern6/6.gif";
imgarr[7] = "ziffern6/7.gif";
imgarr[8] = "ziffern6/8.gif";
imgarr[9] = "ziffern6/9.gif";

Farbliche Anpassungen für die Text-Darstellung von Datum und Wochentag tragen Sie im CSS-Block für '#UhrDatum' und '#UhrTag' ein.

#UhrDatum {
position: relative;
top: 52px;
left: 0px;
width: 160px;
height: 15px;
text-align: center;
color:#00E0FF;
font-family: Verdana,Helvetica,sans-serif;
font-weight: normal;
font-size: 11px;
border:  none;
background: transparent;
}

#UhrTag {
position: relative;
top: 64px;
left: 0px;
width: 160px;
height: 15px;
text-align: center;
color: #FFFF00;
font-family: Verdana,Helvetica,sans-serif;
font-weight: normal;
font-size: 11px;
border:  none;
background: transparent;
}

Hintergrundgrafiken für die digitale Uhr

Die Uhren-Grafik als Hintergrund können Sie austauschen indem Sie für den Div-Bereich der gesamten Uhr (#UhrBox) eine andere Hintergrundgrafik festlegen.
#UhrBox {
...
/* Pfad und Dateiname Hintergrundgrafik */
background: url(armbanduhr-06.png) transparent;
...
Bei der Überarbeitung habe ich die bisherige Grafik (erste Grafik unten) durch eine neue ersetzt und biete Ihnen weitere selbst erstellte Uhrengrafiken an. Die Grafiken (© Jansen) dürfen Sie zur Darstellung der Uhrzeit innerhalb einer Webseite kostenlos nutzen. Zum Herunterladen klicken Sie auf die Grafik (Rechtsklick).

Armbanduhr dynamische digitale Uhr Armbanduhr dynamische digitale Uhr Armbanduhr dynamische digitale Uhr Armbanduhr dynamische digitale Uhr Armbanduhr dynamische digitale Uhr Armbanduhr dynamische digitale Uhr Armbanduhr dynamische digitale Uhr Armbanduhr dynamische digitale Uhr Armbanduhr dynamische digitale Uhr Armbanduhr dynamische digitale Uhr Armbanduhr dynamische digitale Uhr Armbanduhr dynamische digitale Uhr Armbanduhr dynamische digitale Uhr Armbanduhr dynamische digitale Uhr Armbanduhr dynamische digitale Uhr Armbanduhr dynamische digitale Uhr Armbanduhr dynamische digitale Uhr Armbanduhr dynamische digitale Uhr

In der unteren Reihe eine Vorlage ähnlich der Apple iWatch



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: