 EventCounter 300 (300 Pixel Breite)
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.
|
|
grafischer Up- / Down-Counter - Hintergrundgrafik + Text
update 21.02.2011 neue Grafiken hoch geladen
Der Counter ermöglicht in dieser Konstellation die Anzeige von 9 grafischen Ziffern und stellt den Wert im Format DDD:HH:MM:SS (deusch: TTT:SS:MM:SS) dar. Dazu werden Grafiken zeitgesteuert ausgetauscht. Ein 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.
Verwenden Sie den Up- Downcounter um auf eine Veranstaltung hinzuweisen. Erstellen Sie eine eigen Grafik oder verwenden eine meiner Beispielgrafiken. Der Conter zählt bis zum eingestellten Datumswert herunter um ab dann mit dem Hochzählen zu beginnen.
Zeit bis zum Beginn:        
Zeit set dem Beginn:  
Beispiel Zieldatum: var dann = new Date('Jul 1 2011 00:00:01');
Die verwendete Hintergrundgrafik hat die Abmessungen 300 x 50 px .
Grafiken Beispiele:
Aufwand für den Webmaster
1) Script in den Head-Bereich kopieren
2) Aufruf der Funktion in den Body-Bereich kopieren
3) Ziffern-Grafiken im gleichen Ordner abspeichern
4) Datum / Variablen anpassen
Tragen Sie das Zieldatum (und die Uhrzeit?) für den Counter bei der Variablen 'dann' ein:
var dann = new Date('Jul 1 2011 00:00:01');
Zur Notierung des Zieldatums in englischer Schreibweise habe ich im Quelltext eine Hilfe für die Monatsbezeichnungen vorgesehen.
Um die Anpassung des Counters flexibel zu gestalten habe ich in diesem Beipsiel im Script für wichtige Elemente Variablen verwendet. Diese Angaben müssen Sie nicht ändern!
var beschreibung1 = "Zeit bis zum Beginn";
var beschreibung2 = "Zeit seit dem Beginn";
var HintergrundGrafik = "bg-schach.jpg";
var Trennzeichen = "sw11.gif"; // Doppelpunkt
var Platzhalter = "transpixel.gif";
Die erste Variable 'dann' enthält das Zieldatum. Die Variablen 2 und 3 sind für den Kurztext vorgesehen. Die 4. Variable 'HintergrundGrafik' enthält Pfad und URL für die Hintergrundgrafik. Für das Trennzeichen zwischen den Werten ist die Variable 'Trennzeichen' reserviert. Pfad und URL für die transparente Grafik wird der Variablen 'Platzhalter' zugewiesen.
Für einen schnellen Zugriff werden die Zifferngrafiken sw0.gif - sw9.gif
in einen Array eingelesen:
// pfad und Dateinamen (ohne Ziffer) für die Grafiken
// für die Grafiken sw0.gif, sw1.gif, sw2.gif, ... sw9.gif
imgarr[i].src = "sw" + i + '.gif';
Wenn sie sämtliche Grafiken im gleichen Ordner der HTML-Seite abspeichern, muss kein Pfad eingtragen werden. Zur Notierung des Zieldatums in englischer Schreibweise habe ich im Quelltext eine Hilfe für die Monatsnamen vorgesehen.
 JavaScript in ein HTML-Dokument 'einbauen'
Aufruf im Body
Nachdem sie das JavaScript im Head-Bereich notiert haben und die Grafiken abgespeichert haben muss die Funktion zur Anzeige des Counters im Body-Bereich nur noch aufgerufen werden. Sie tragen den Funktionsaufruf an genau der Stelle ein, wo der Counter erscheinen soll.
<script type="text/javascript" language="JavaScript">
<!-- Begin
Counter300()
// End -->
</script>
Einen Link zur Textdatei mit dem Quellcode und eine Downloadmöglichkeit finden sie im Kopfbereich dieser Seite. Meine Grafiken dürfen sie für den Counter frei verwenden.
Info zu den verwendeten Grafiken
Es werden 10 Zifferngrafiken (schwarz / transparent, 14 x 12 Pixel) und
eine weitere für das Trennzeichen (14 x 5 Pixel) verwendet:
  Außerdem noch eine transparente Grafik (transpixel.gif) als Platzhalter.
Erstellen sie ihre eigene Hintergrundgrafik mit den Abmessungen 300 x 50 Pixel. Sehen sie im rechten Breich einen Freiraum für die kurze Textnachricht und den Counter vor.
Beispiel:
Download + alternative Grafiken
Einen Link zur Textdatei des Quellcodes und eine Downloadmöglichkeit finden sie im Kopfbereich dieser Seite. In der ZIP-Datei sind neben der HTML-Datei alle benötigten Grafiken enthalten. Alternative Hintergrundgrafiken laden Sie durch Rechtsklicken und speichern. Meine Grafiken dürfen sie für den EM-Counter frei verwenden.
Zifferngrafiken
Hier haben sie die Möglichkeit einen Set der Ziffern separat herunter zu laden. In diesen beiden ZIP-Dateien sind alle Ziffern, ein Trennzeichen und eine transparente Grafik enthalten.
Weitere Ziffern-Grafiken finden sie in meiner MINI-IMAGE-BOX. Ich habe 13 unterschiedliche Sätze digitaler Ziffern zum Download hochgeladen. Die Auswahl soll später noch erweitert werden. Wenn sie möchten, können sie also weitere, eigene Varianten des Counters mit diesen Grafiken erstellen.
MINI-IMAGE-BOX, Menü: Digitale Ziffern zur MINI-IMAGE-BOX 
ursprünglicher Counter
Der Counter wurde ursprünglich für die EM 2008 entwickelt und wird nun auch für die EM 2012 angeboten.
Hier der EM-Counter
EM-Counter 01
Event-Counter 01
Fußballweltmeisterschaft - WM-Counter 2010 - Versoin 01
Fußballweltmeisterschaft - WM-Counter 2010 - Versoin 01
Event-Counter 01 - UpDown-Counter
Event-Counter 02 - UpDown-Counter
Stundenzähler bis zur WM - UpDown-Counter
|
Home • Datum • EventCounter 300
DOWNLOAD
Grafiken
