 UpDown-Counter 03 (Variante 02)
Für einige Counter habe ich separate Beispielseiten ohne weitere Erklärungen erstellt. Im Wesentlichen handelt es sich um Varianten durch unterschiedliche CSS-Anweisungen und verwendete Grafiken.
|
|
update: 15.09.2008 09:30 Uhr, Hinweis auf Fehlermeldung (Limit überschritten) hervorgehoben + Demo hinzugefügt
Anzeige: DDD : HH : MM : SS Limit: 2,73 Jahre in beide Zählrichtungen
Analog zum UpDownCounter 03-1 zeigt dieser grafische Counter den Tageswert dreistellig an (hier große Ziffern). Erklärungen auf der Seite  UpDownCounter 03
Der Counter ist vielseitig einsetzbar. Abhängig von Größe und Farbe der Grafiken in Verbindung mit einer geeigneten Hintergrundfarbe / Hintergrundgrafik wird er unterschiedlich wahrgenommen. Die digitalen Ziffern habe ich selbst erstellt und liegen in verschiedenen Sets vor. Infos zu den Grafiken finden sie weiter unten.
UpDownCounter in ihre Seite einbinden
Aufwand für den Webmaster:
1) Script in den Head-Bereich kopieren
2) Tabelle 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'
a 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 die Tabelle mit den Startgrafiken 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):
im Unterordner images: blau50-0 - blau50-11
b Formatierung
Hintergrundfarbe (hellgrau): #F0F0F0, Randfarbe (grau): #CFCFCF
#anzeige01 {
border:1px solid #CFCFCF;
background-color: #F0F0F0;
text-align:center;
color:#FFFFFF;
padding:20px;
}
Zieldatum
Zur Anpassung des Endwertes folgende Änderungen im Script:
| Variable |
hier im Beispiel |
ersetzen mit |
| dann |
new Date('June 7 2010 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 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. Auf diese Countervarianten verweise ich im Menü (links) mit den Textlinks 'Beispiel Variante XX'.
NEU 15.09.2008 23:00 Uhr
Ich habe heute 13 unterschiedliche Sätze digitaler Ziffern zum Download in meine MINI-IMAGE-BOX hochgeladen. Die Auswahl soll später noch erweitert werden.
 zur Mini-Image-Box 
Wenn sie möchten, können sie also weitere, eigene Varianten des Counters mit diesen Grafiken erstellen.
|
HOME
Grafiken 
ZURÜCK 
