 UpDown-Counter 03 dynamische grafische Anzeige
Dieses JavaScript errechnet aus dem Systemdatum und ihrer Vorgabe die Differenz und zeigt die Tages-, Stunden-, Minuten- und Sekundenwerte als grafischen Counter mit digitalen Ziffern an. Es wird keine Textmeldung eingeblendet.
DDD : HH : MM : SS (ohne Textmeldungen)
Ähnlich dem EM-Counter zeigt dieser grafische Counter den Tageswert dreistellig an. Eingestelltes Datum hier:
|
 |
|
Funktion
Der Counter errechnet die Zeitdifferenz zwischen dem Systemdatum und dem eingetragenen Zieldatum. Aus dieser Information entnimmt das Script die Werte für die Darstellung und weist entsprechende Grafiken zu, deren Anzeige im Sekundentakt auf den aktuellen Stand gebracht wird.
Beim Erreichen des Zieldatums ändert der Downcounter seine Funktion und wird zum Upcounter, zählt also Tage, Stunden, Minuten und Sekunden seit Verstreichen des von ihnen festgelegten Zeitwertes hoch.
Zieldatum:
Das eingetragenes Ziel wird der Variablen 'dann' zugeordnet:
var dann = new Date('June 7 2008 18:00:00');
Verwenden sie bei dieser Schreibweise die englischsprachigen Monatsbezeichnungen. Eine Liste der engl. Monatsnamen steht als Kommentar im Quelltext.
Limit:
Der Counter ermöglicht in dieser Konstellation die Anzeige von 9 grafischen Ziffern und stellt den Wert im Format DDD:HH:MM:SS (deutsch: TTT:SS:MM:SS) dar. Dazu werden Grafiken zeitgesteuert ausgetauscht. Ein Zählvorgang kann die Maximal- und Minimalwerte 999:23:59:59 anzeigen. Der Counter kann also für einen Zeitraum von 2,73 Jahren in beide Zählrichtungen eingesetzt werden.
UpDownCounter in ihre Seite einbinden
Der Counter ist vielseitig einsetzbar. Abhängig von Größe und Farbe der Grafiken in Verbindung mit einer geeigneten Hintergrundfarbe kann er auch als dezentere Version auf ihren Seiten erscheinen. Infos zu verwendeten Grafiken finden sie weiter unten. Die digitalen Ziffern habe ich selbst erstellt und liegen in verschiedenen Sets vor.
Aufwand für den Webmaster:
1) Script in den Head-Bereich kopieren
2) Tabelle und Formular in den Body-Bereich kopieren
3) Grafiken im Unterordner 'images' abspeichern
4) Datum anpassen
Zum Testen des Scripts:
verstellen sie das Systemdatum  Nachdem sie das Datum verstellt haben, laden sie die Seite neu, indem sie 'Aktuelle Seite neu laden' (Refresh) anklicken.
 JavaScript in ein HTML-Dokument 'einbauen'
Aufruf im Body
Nachdem sie das JavaScript im Head-Bereich notiert haben und die Grafiken im Unterordner 'images' abgelegt haben muss zur Anzeige des Counters im Body-Bereich nur noch das in eine Tabelle eingebettete Formular notiert werden. Das soll an genau der Stelle geschehen, wo der Counter erscheinen soll.
Einen Link zur Textdatei mit dem gesamten Quellcode und eine Downloadmöglichkeit für die Grafiken finden sie im Kopfbereich dieser Seite. Meine Grafiken dürfen sie für den Counter frei verwenden. Die hier verwendeten Grafiken (Zip-Datei im Seitenkopf):
          
Zieldatum
Zur Anpassung des Endwertes folgende Änderungen im Script:
| Variable |
hier im Beispiel |
ersetzen mit |
| dann |
new Date('June 7 2008 18:00:00') |
Datum- / Zeitwert |
Englische Schreibweise des Monatsnamens beachten:
January, February, March, April, May, June, July, August, September, October, November, December
Varianten
Der Counter wird schon bald in mehreren Varianten angeboten werden!
Für die Counter werden in Farbe und Größe abweichende Zifferngrafiken eingesetzt und außerdem kann die Hintergrundfarbe und Umrandung mit CSS-Angaben festgelegt werden. Auf diese Countervarianten verweise ich dann im Menü links mit den Textlinks 'Beispiel'.
|
HOME
Grafiken 
Quellcode
ZURÜCK 
