 UpDown-Counter 03 (Variante 03)
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.
DDD : HH : MM : SS (ohne Textmeldungen)
Analog zum UpDownCounter 03-1 zeigt dieser grafische Counter den Tageswert dreistellig an. Hier werden andere Grafiken verwendet.
Erklärungen auf der Seite  UpDownCounter 03
|
 |
|
Anpassungen
Hintergrundfarbe und Rahmenformatierung können sie nach eigenen Vorstellungen anpassen. Andern sie dazu die Angaben für 'background-color' und 'border' im CSS-Block für die ID 'anzeige'
#anzeige01 {
border: 1px solid #CFCFCF;
background-color: #ECFFF1;
text-align:center;
color:#FFFFFF;
}
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 
