Event-Counter 01  dynamischer Counter mit Hintergrundgrafik

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.

1) Script in den Head-Bereich kopieren 2) Aufruf der Funktion in den Body-Bereich kopieren 3) Grafiken abspeichern 4) Counter anpassen JavaScript in ein HTML-Dokument 'einbauen'

(Erklärungen finden Sie unten) Dieser Counter lässt sich durch den Austausch der Hintergrundgrafik leicht anpassen. Den Eintrag von Werten Datum + Uhrzeit, Texte und Randfarbe habe ich zusammen gefasst. Die Angaben werden im Script den entsprechenden Variablen zugeordnet.

Der Aufwand zum Einbau 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, setzen die URL für die entsprechende Hintergrundgrafik ein, fertig. Sie können eigene Grafiken herstellen (144 × 97) oder laden eine Grafik aus meinem Angebot herunter (unten).

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

<script type="text/javascript" language="JavaScript">
<!-- Begin

EventCounter01()

//  End -->
</script>

// hier Datum und Uhrzeit 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 6.11.2011";
var Beschreibung02 = "Zeit seit dem 6.11.2011";

// Pfad und Dateiname Hintergrundgrafik
var Grafik = "bg-schulferien.jpg";

// Randfarbe für die Darstellung
var Randfarbe = "#009F00";

// das waren alle wichtigen Änderungen :::::

// Pfad und Dateiname Hintergrundgrafik
var Grafik = "pfad/dateiname.jpg";

Neben einer Version für Tage - Stunden - Minuten - Sekunden wird es eine Variante für Jahre - Tage - Stunden - Minuten geben.