 digitale Uhr 05 - vertikale Uhr 01
Eine schicke dynamische Uhr mit digitaler 24 Stunden Zeitanzeige. Funktioniert in allen Browsern und eignet sich für unterschiedliche Anwendungen.
|
|
dynamische vertikale Uhr mit grafischen Ziffern
Die 8 Grafiken, je 2 für Stunden-, Minuten- und Sekundendarstellung, sind im Body der Seite als Platzhalter für die Ziffern innerhalb einer Tabelle eingetragen. Anmerkung: Eine Einbindung in eine Tabelle ist nicht unbedingt erforderlich, gibt mir aber bei der Formatierung der Uhr weitere Gestaltungsmöglichkeiten Rand, Hintergrundfarbe, Abstand).
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 wird die Datenquelle für die entsprechenden Images zugeordnet und die Platzhalter in der Tabelle werden entsprechend ausgetauscht.
Aufwand:
- Scriptcode in den Head-Bereich kopieren
- CSS-Anweisungen in den Head-Bereich kopieren
- Funktionsaufruf im Body-Bereich notieren
- Hintergrundfarbe anpassen
|
|
Die Uhr wird in Ihrem Dokument dort angezeigt, wo Sie den Funktionsaufruf notieren.
<script type="text/javascript" language="JavaScript">
<!--
VertikaleUhr01();
//-->
</script>
Das war's schon! Wenn sie mehr über mögliche Anpassungen erfahren möchten, lesen Sie unten weiter. Erklärungen zur Funktion lesen Sie auf der Beispielseite  digitale Uhr 01
Wenn Ihnen das als Einstieg ausreicht öffnen Sie die Quellcodeseite, kopieren den Code in Ihre Seite und experimentieren weiter.
a) Hintergrundfarbe
In den CSS-Anweisungen ist zur Zeit die Hintergrundfarbe mit dem Wert '#0090E0' festgelegt. Ändern Sie den Wert um die Uhr Ihrem Layout anzupassen. Berücksichtigen Sie, das in dieser Version der 'vertikalen Uhr 01' weiße Ziffern verwendet werden.
#VertikaleUhr {
position:relative;
top:0px;
left:0px;
background-color:#0090E0;
padding:2px:
}
b) abweichende Position (relativ)
Die Uhr wird in Ihrem Dokument dort angezeigt, wo Sie den Funktionsaufruf notieren. Abweichend davon können Sie für die Position (relativ zu diesem Ort) X und Y-Werte eintragen, um den Anzeigeort zu verschieben. Auch negative Werte sind möglich.
#VertikaleUhr {
position:relative;
top:0px;
left:0px;
background-color:#0090E0;
padding:2px:
}
#VertikaleUhr {
position:relative;
top:-120px;
left:80px;
background-color:#0090E0;
padding:2px:
}
c) abweichende Position (absolut)
 BEISPIEL 02 - absolute Position anzeigen 
Die Uhr wird normalerweise in Ihrem Dokument dort angezeigt, wo Sie den Funktionsaufruf notieren. Abweichend davon können Sie für die Position absolute und X und Y-Werte eintragen, um den Anzeigeort festzulegen.
Beispiel für die Position in der linken oberen Ecke:
#VertikaleUhr {
position:absolute;
top:0px;
left:0px;
background-color:#0090E0;
padding:2px:
}
d) abweichende Position (rechts oben)
BEISPIEL 03 - absolute Position oben rechts anzeigen
Die Uhr wird normalerweise in Ihrem Dokument dort angezeigt, wo Sie den Funktionsaufruf notieren. Abweichend davon können Sie die Position absolute rechts oben festlegen.
Beispiel für die Position in der linken oberen Ecke:
#VertikaleUhr {
position:absolute;
top:0;
right:0px;
background-color:#00DF00;
padding:2px:
}
e) Grafiken
In dieser Version der 'vertikalen Uhr 01' vwewende ich weiße Zifferngrafiken. Der Speicherort und die Dateinamen für diese Grafiken sind in Variablen abgelegt. Ich verwende durchnummerierte Namen von '0.gif' bis '9.gif' und für den Doppelpunkt 'p.gif'. Die Grafiken sind im Unterordner 'digits' abgelegt und haben die Abmessungen 9 × 5 Pixel.
// hier drei Angaben eintragen
Verzeichnis01 = "digits/";
Name01 = ""; // ohne letzte Nummer
Dateiendung01 = ".gif";
INFO 30.07.2010 13:00 Uhr, Beispiel wird gerade erstellt / bearbeitet.
Weitere Erklärungen folgen
|
Home • Zeit • digitale Uhr 05
DOWNLOAD