 Digitale Uhr 01
Eine schicke Uhr mit 24 Stunden Zeitanzeige. Funktioniert in allen Browsern und eignet sich für unterschiedliche Anwendungen. Eine dynamische Zeitanzeige visualisiert mittels Grafiken für alle Ziffern / Zeichen der digitalen Uhr.
 08.07.2007, Script völlg überarbeitet!
1) Platzhalter-Variablen im Script für Dateiendung und Verzeichnis
2) Übergabe der src-Angaben durch getElementById
3) Vorlade-Funktion der Ziffern-Images
4) Drei neue Image-Sätze für die Ziffern erstellt (download)
Funktion
|
| |
In einer Tabelle im Body der Seite sind Platzhalter für alle Ziffern eingetragen. Anmerkung: Eine Einbindung in eine Tabelle ist nicht unbedingt erforderlich, gibt mir aber bei der Formatierung der Uhr weitere Gestaltungsmöglichkeiten durch Randformatierung.
|
|
|
Die 8 Grafiken der Uhr stehen in einer Tabelle. Je 2 für Stunden-, Minuten- und Sekundendarstellung, getrennt durch ein Image 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 wird die Datenquelle für die entsprechenden Images zugeordnet und die Platzhalter in der Tabelle werden entsprechend ausgetauscht.
Aufwand:
1) Script in den Head-Bereich kopieren
2) Die Tabelle mit den Platzhaltern in den Body kopieren
3) Grafiken in einen Unterodner kopieren
Anpassungen
Alternative Darstellungen sind durch Austausch der Ziffern-Images möglich. Ihrer Phantasie sind da keine Grenzen gesetzt. Wenn sie Images mit anderen Abmessungen verwenden, müssen die Größenangaben natürlich angepasst werden.
 Demo der Version mit dem Mini-Ziffern 11 x 14 Pixel
Alternative Speicherorte und / oder Dateinamen können sie im JavaScript leicht anpassen.
// hier die beiden Angaben eintragen
Verzeichnis = "ziffern7/";
Dateiendung = ".gif";
Darstellung der digitalen Uhr - sie benötigen 11 Images
Dazu benötigen sie natürlich entsprechende Grafiken die sie selbst herstellen oder einen freien Quelle entnehmen. Hier 3 meiner selbst erstellten Grafik-Sätze:
| Nr. | 0.gif - 9.gif : | 11.gif | Anzeige | transparent |
| 7 |
          |
 |
| ja |
| 8 |
          |
 |
| ja |
| 6 |
          |
 |
| nein |
Für die Herstellung der beiden Sätze 'Nr. 8' und 'Nr. 6' gab es einen dringenden Bedarf finde ich. In den freien Bildquellen sucht man sehr kleine Ziffern oft vergeblich.
Durch Angaben zur Hintergrundfarbe und Randformatierung der Tabelle wäre eine noch individuellere Anpassung an ihre Seite möglich:
| Nr. | 0.gif - 9.gif : | 11.gif | Anzeige | transparent |
| 7 |
|
|
| ja |
| 8 |
|
|
| ja |
| 6 |
|
|
| nein |
Ziffern aus einen freien Quelle
| Nr. | 0.gif - 9.gif : | 11.gif | Anzeige | transparent |
| 2 |
          |
 |
| nein |
Grundsätzliche Erklärungen zum date()-Objekt und den Möglichkeiten die Informationen für Datum und Zeit in Scripten weiter zu verarbeiten, finden sie auf der Seite
 Datum Einführung 02 - Übersicht
Die Möglichkeit Datum und Uhrzeit dynamisch anzeigen zu lassen, wobei ein Update jede Sekunde stattfindet, finden sie auf der Seite
Datum und Uhrzeit dynamisch darstellen
Die Möglichkeit Datum und Uhrzeit lediglich sttisch anzeigen zu lassen, erkläre ich auf einer eigenen Seite. Dort gibts die Wahl zwischen 4 Darstellungsmöglichkeiten und ich zeige Beispiele zur Formatierung und Anwendung.
Datum und Uhrzeit statisch darstellen
|
Home
Nr2 
ScriptCode 
ZURÜCK