 Event-Counter 01
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. Zusätzlich wird eine Textmeldung eingeblendet die beim Wechsel (up/down) verändert wird.
|
|
universeller grafischer Up- / Down-Counter - Hintergrundgrafik + Text
update 27.09.2009 Textdatei Quellcode, neue Grafiken, im Download Adventskalender
Aktive Demo Event-Counter Version 01
Einen Link zur Textdatei des Quellcodes und die Downloadmöglichkeit (ZIP der HTML-Demodatei + aller Grafiken) finden sie im Kopfbereich dieser Seite. Meine Grafiken dürfen sie für den Event-Counter frei verwenden. Weitere Hintergrundgrafiken und separate ZIP-Dateien für die Ziffern-Grafiken finden sie weiter unten.
Hier haben sie nun erweiterte Anpassungsmöglichkeiten durch bereitgestellte Grafiken und vereinfachte Angaben zu Datenquellen für Ziffern und Hintergrund, Text und Randarbe.
Der Aufwand zur Anpassung des Event-Counters ist recht gering: Sie kopieren das Script in den Head-Bereich ihrer Seite und den Aufruf der Funktion in den Body-Bereich an der Stelle, wo der Counter erscheunen soll. Dann passen sie das Datum an und setzen die entsprechende Hintergrundgrafik ein, fertig.
|
 |
Einsatzbereiche
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.
Der Zählvorgang kann die Maximal- und Minimalwerte 999:23:59:59 anzeigen, also für einen Zeitraum von 2,73 Jahren in beide Zählrichtungen eingesetzt werden. Im Klartext: Der Couter kann 2 Jahre 266 Tage vor und nach dem Event sinnvoll eingesetzt werden.
Vor einer Hintergrundgrafik werden eine kurze Textmeldung und die Grafiksymbole des Counters angezeigt. Screenshots:
Wenn dieser Counter zunächst als DownCounter eingesetzt wird, schaltet er bei Erreichen des festgelegten Zeitpunkts automatisch um und beginnt mit dem UpCount.
|
screenshot
|
Nach dem Umschalten vom Down- zum UpCounter wird die vorher angezeigte kurze Textmeldung ab diesem Zeitpunkt durch eine andere ersetzt. Siehe Screenshots rechts.
Infos zur verwendeten Grafik finden sie weiter unten. Die digitalen Ziffern habe ich selbst erstellt und liegen in diversen Versionen vor.
|
screenshot
|
Aufruf im Body
Nachdem sie das JavaScript im Head-Bereich notiert haben und die Grafiken abgespeichert haben, muss nur noch die Funktion zur Anzeige des Counters im Body-Bereich notiert werden. Sie tragen den Funktionsaufruf an genau der Stelle ein, wo der Counter erscheinen soll.
<script type="text/javascript" language="JavaScript">
<!-- Begin
EventCounter01()
// End -->
</script>
Anpassung des Scripts
Anpassungen habe ich nun erleichtert, indem ich entsprechende Variablen eingerichtet habe. An zentraler Stelle finden sie die Möglichkeiten zum Eintrag der Werte.
// hier Datum eintragen
// Jan, Feb, Apr, May, Jun, Jul, Aug, Sep, Oct, Nov, Dec
var Zieldatum = new Date('Dec 24 2009 15:00:00');
// Texte vor / nach
var Beschreibung01 = "Zeit bis zum Beginn";
var Beschreibung02 = "Zeit seit dem Beginn";
// Pfad und Dateiname Hintergrundgrafik
var Grafik = "images/bg-schulferien.jpg";
// Randfarbe für die Darstellung
var Randfarbe = "#009F00";
// Pfad Ziffern 0-9 und die transparente Grafik (transpixel)
var Pfad = "images/";
// erster Teil des Dateinamens für die Ziffern-Grafiken
// ohne die letzte Ziffer, Punkt und Dateiklasse (gif,jpg)
// Bsp.: bei ziffer0.gif "ziffer"
// Bsp.: 0.gif ""
var Ziffern = "";
(laden sie die benötigte Hintergrundgrafik herunter, siehe weiter unten)
Info zu meinen Grafiken
In der ZIP-Datei, für die sie im Kopfbereich einen Download-Link finden, ist eine HTML-Datei, eine Hintergrundgrafik, alle schwarzen Ziffern und eine transparente Grafik enthalten.
Ziffern + Hintergrundgrafik
Hier haben sie die Möglichkeit einen Set der Ziffern + 1 Hintergrundgrafik (Weihnachten) separat herunter zu laden.
Bei der Fußball-Weltmeisterschaft war es ein einziges Ärgernis! Wer durfte das WM-Logo verwenden, wem war es verboten, welche Kosten fallen an? Mit dem Olympia-Symbol verhält es sich ähnlich. Das verwendete EM-Logo stammt von  emlogo.at, das Olympiasymbol und weitere verwendete Grafiken habe ich selbst entworfen. Andere Symbole stammen aus der Quelle Wikimedia Commons.
Wenn sie eine eigene Hintergrundgrafik erstellen möchten verwenden sie die Größe 144 x 97 Pixel (sorry für das außergewöhnliche Maß, das hatte sich so ergeben. Hier meine bisher erstellten Vorlagen, die sie verwenden dürfen, wenn der Copyright-Vermerk im Quelltext des Counters erhalten bleibt. Den in einigen Vorlagen enthaltenen Link aud die Web-Toolbox habe ich zur Demo eingetragen und darf entfernt werden.
einzelne Hintergrundgrafiken
                                 
Laden sie eine Grafik durch Rechtsklicken herunter und ändern die Referenz (Pfad + Dateiname) im Script.
// Pfad und Dateiname Hintergrundgrafik
var Grafik = "pfad/dateiname.jpg";
Weitere Grafik-Versionen demnächst
 Vorschläge ?
in Arbeit: Last-Update-Counter
Den Counter werde ich weiter entwickeln. Neben einem Erstellungsdatum, das fest vorgegeben wird, entnimmt der Counter das datum der letzten Bearbeitung aus den Datei-Attributen.
|
Neben einer Version für Tage - Stunden - Minuten - Sekunden
wird es eine Variante für Jahre - Tage - Stunden - Minuten geben.
|
   
|
HOME
DOWNLOAD 
Demo-5 
ZURÜCK 
JavaScript in ein HTML-Dokument 'einbauen'
