 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.
|
|
dynamische Uhr - digitale Anzeige
UPDATE Die Funktion wurde ü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 Grafik-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-Grafiken möglich. Ihrer Phantasie sind da keine Grenzen gesetzt. Wenn Sie Grafiken 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 drei Angaben eintragen, Beispiel für: ziffern7/ziffer-01.gif
Verzeichnis01 = "ziffern7/";
Name01 = "ziffer-0"; // ohne letzte Nummer
Dateiendung01 = ".gif";
Darstellung der digitalen Uhr - sie benötigen 11 Grafiken
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.
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.
| Nr. | 0.gif - 9.gif : | 11.gif | Anzeige | transparent |
| 7 |
          |
 |
| ja |
| 8 |
          |
 |
| ja |
| 6 |
          |
 |
| nein |
Downloads:  Nr2
Nr6
Nr7
Nr8
Hintergrundfarben
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 |
weitere Zifferngrafiken
Ich habe 13 unterschiedliche Sätze digitaler Ziffern zum Download in meine MINI-IMAGE-BOX hochgeladen. Dort finden sie also alle von mir bisher erstellten Grafiken für digitale Uhren oder Counter übersichtlich geordnet. Die Auswahl soll später noch erweitert werden.
 zur Mini-Image-Box 
Wenn sie möchten, können sie also weitere, eigene Varianten erstellen.
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 • Zeit • digitale Uhr 01