 UpDown-Counter 03-01 (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.
|
|
digitaler dynamischer UpDown-Counter in Sekundenschritten
UPDATE Alert-Meldung wenn Limit überschritten
Anzeige: DDD : HH : MM : SS
Limit: 2,73 Jahre in beide Zählrichtungen
Grafiken als Ziffern
Dieser grafische Counter zeigt die Anzahl der Tage als dreistelligen Wert an. Eingestelltes Datum hier:
Zur Deko und zur Inspiration hier eine Darstellung mit Hintergrundgrafik. Binden Sie Ihre eigene Grafik ein.
|
|
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. Er zählt also Tage, Stunden, Minuten und Sekunden seit Verstreichen des von ihnen festgelegten Datumswertes hoch.
Das eingetragenes Counter-Ziel bzw. der Wert für die Grenze des Hoch- oder Herunterzählens wird der Variablen 'dann' zugeordnet:
var dann = new Date('January 30 2011 18:00:00');
Verwenden Sie bei dieser Schreibweise die englischsprachigen Monatsbezeichnungen. Eine Liste der engl. Monatsnamen steht als Kommentar im Quelltext.
Das Script leistet hier Schwerstarbeit! Jede Sekunde werden 9 Grafiken ausgetauscht. Das wird über die ID, die für jede Grafik vergeben und als Attribut im <img>-Tag notiert wurde, organisiert. Beispiel für eine Zifferngrafik:
<img id="z1" height="14" src="images/g0.gif" width="11">
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:
- Script in den Head-Bereich kopieren
- CSS-Anweisungen in den Head-Bereich kopieren
- Grafiken im Unterordner 'images' abspeichern
- Div-Bereich + Grafiken im Body-Bereich notieren
- Datum anpassen
Bitte entnehmen Sie den gesamten Quellcode für dieses Beispiel der Textdatei (Link oben im Kopfbereich). Dort können Sie ebenfalls eine Demo- bzw. eine Beispieldatei abrufen. Infos und Erklärungen zum 'Einbauen' von JavaScript finden Sie im  JavaScript Menü 01 oder gezielt auf der Seite Kurzinfo JavaScript 'einbauen'
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.
a Notierung 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 der Div-Bereich mit den Startgrafiken notiert werden. Das soll an genau der Stelle geschehen wo der Counter erscheinen soll. Innerhalb des Div-Bereichs sind die Grafiken notiert:
<div id="CounterBox">
  
</div>
Die Grafiken für die digitalen Ziffern werden nach dem Start des Counters jede Sekunde ausgetauscht um die aktuellen Werte anzuzeigen.
b Zieldatum
Zur Anpassung des Endwertes folgende Änderungen im Script:
| Variable |
hier im Beispiel |
ersetzen mit |
| dann |
new Date('January 30 2011 18:00:00') |
Datum- / Zeitwert |
Englische Schreibweise des Monatsnamens beachten:
January, February, March, April, May, June, July,
August, September, October, November, December
c CSS-Anweisungen
Der Div-Bereich mit der ID 'CounterBox' in dem die Grafiken dargestellt werden wurde von mir mit CSS-Anweisungen formatiert. So kann man Breite, Hintergrundfarbe und andere Formatierungen (z.B. einen Rand) ganz zentral ändern / festlegen. Das ist besonders dann von Interesse, sollten Sie sich für andere Grafiken / größere digitale Ziffern entscheiden.
#CounterBox {
position: relative;
top: 0px;
left: 0px;
width: 120px;
height: 14px;
border: 1px solid #F0F4FF;
background-color: #000000;
margin: 0px;
padding: 2px;
text-align: center;
}
#CounterBox img {
border: none;
margin: 0px;
padding:0px;
}
d Grafiken und Quellcode
Einen Link zur Textdatei mit dem gesamten Quellcode und eine Downloadmöglichkeit für die Grafiken finden sie im Kopfbereich dieser Seite (Zip-Datei). Meine Grafiken dürfen sie für den Counter frei verwenden. Die hier verwendeten Grafiken haben die Abmessung 11 × 14 Pixel.
        
Sie können die in diesem Modul angezeigten Grafiken natürlich gegen andere austauschen, solange Sie den Eintrag für die ID nicht vergessen.
Limit und Fehlermeldung
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.
Wird dieses Limit überschritten erzeugt das den Fehler:
"imgarr[ ].src ist 0 oder kein Objekt"
Wenn der errechnete Tageswert größer als 999 ist, versucht das Script die Grafik für eine 4. Ziffer anzuspechen, die aber nicht existiert. Es gibt kein Objekt das für diese Ziffer definiert wurde. Prüfen sie das indem sie die Jahreszahl des Zieldatums näher am aktuellen Datum (Systemdatum) festlegen.
Varianten
Der Counter wird bereits in mehreren Varianten angeboten.
Für die Beispiele werden in Farbe und Größe abweichende Zifferngrafiken eingesetzt und außerdem kann die Hintergrundfarbe und Umrandung mit CSS-Angaben festgelegt werden. Countervarianten finden Sie im Menü links.
NEU
Ich habe heute unterschiedliche Sätze digitaler Ziffern zum Download auf meine MINI-IMAGE-BOX hochgeladen. Die Auswahl soll später noch erweitert werden.
Auszug des Angebots als Screenshot
 zur Mini-Image-Box 
Wenn sie möchten, können sie also weitere, eigene Varianten des Counters mit diesen Grafiken erstellen.
|
Home • Datum • UpDown
Grafiken
