 UpDown-Counter 03-04 (dynamische grafische Anzeige)
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.
|
|
digitaler dynamischer Counter in Sekundenschritten
UPDATE Alert-Meldung wenn Limit überschritten, 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 werden Grafiken mit den Abmessungen 28 × 40 Pixel verwendet.
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 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 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 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):
        
b Formatierung mit CSS
Hintergrundfarbe und Rahmenformatierung können Sie nach eigenen Vorstellungen anpassen. Ändern 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: #FFFFFF;
text-align:center;
color:#FFFFFF;
}
#zaehler {
width:300px;
text-align:center;
padding:5px;
margin:0px;
}
c Zieldatum
Zur Anpassung des Zieldatums folgende Änderungen im Script:
| Variable |
hier im Beispiel |
ersetzen mit |
| dann |
new Date('June 7 2011 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 • Datum • UpDown
Grafiken