Spielbegegnung Europameisterschaft Counter 01
 HomeDatum • Counter Demo 01  Demo 02  Demo 03  Quellcode   DOWNLOAD 

Spielbegegnungs-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 werden zwei Embleme und zwei Textmeldungen eingeblendet.
counter up-down-counter digital dynamisch zeit tage

Spielbegegnungs-Counter (nicht nur für Fußball) - UpDown-Counter

UPDATE  10.02.2014  Modul völlig überarbeitet, zusätzliche Grafiken

Der Unterschied zu meinem UpDown-Counter 01 - Modul besteht a) in der Möglichkeit 2 Grafiksymbole einzubinden, die ohne großen Aufwand rasch ausgetauscht werden können und b) in der zweiten Textnachricht (AnzeigeTitel) z. B. für die Spielpaarung (unten Deutschland - Portugal). Als Grafiksymbole eignen sich kleine Flaggen, farbige Trikots oder das Logo der Vereine. Selbstredend: Der Counter ist nicht nur für die Sportart 'Fußball' einsetzbar: Volleyball, Schwimm- oder Schachwetbewerbe können mit dem Couter ebenfalls angekündigt werden.

Das eingestellte Zieldatum für diesen UpDown-Counter ist der Beginn der Veranstaltung. Es wird in der Variablen "DatumZiel" abgelegt und ist bei der Demo rechts:



Innerhalb des Anzeigebereichs (ID=Anzeige) habe ich mehrere <DIV>-Bereiche definiert. 'AnzeigeTitel' nimmt einen kurzen Text auf (hier: Deutschand - Portugal).

Der Bereich 'InfoText' zeigt einen Text der Abhängig vom Status ist (Up- oder Down-Count): Zeit bis zum Beginn / Zeit seit dem Beginn. Der dritte DIV>-Bereich 'CounterBox' beinhaltet die Grafiken für die digitalen Ziffern.

Für die Darstellung von zwei Emblemen (Vereinslogo oder Flaggen) habe ich eine zwei Boxen festgelegt, in der die beiden Grafiken links und rechts ausgerichtet werden. Größe und Position der Bereiche sind mit CSS-Angaben festgelegt. Zur Anpassung könnte man alle Bereiche neu positionieren und formatieren.







   schnelle Anpassung

Durch den Austausch der beiden Embleme (Flaggen, Logos) und des Textes sowie durch die Anpassung der Eintragungen für Datum und Texte ist dieser Counter schnell angepasst und kann immer wieder (wöchentlich?) eingesetzt werden. Natürlich eignet er sich nicht nur für die EM sondern für jede Spielankündigung und das nicht nur im Bereich Fußball.

Sie ändern lediglich die Angaben für die beiden grafischen Symbole im CSS-Block und die Einträge für Datum und Texte im Script.

Die in der Demo eingesetzten Flaggen stammen aus meiner Mini-Image-Box. Dort finden Sie mehr als 200 Flaggen mit diesen Abmessungen 46 × 31 Pixel (45 × 30 + 1px Rand unten und rechts).

     

Der Link zur Unterseite:

World Flags - Flaggen für Ihre Reiseberichte








Abhängig von Einsatzbereich wählen Sie kleine Grafik-Symbole die Sie aus freien Icons entwickeln könnten. Beispiel: Vereinsfarben und Grafiken 46 × 31 Pixel:




   Zieldatum

Das ZielDatum wird mit englischen Monatsbezeichnungen eintragen: (Jan, Feb, Apr, May, Jun, Jul, Aug, Sep, Oct, Nov, Dec). Sie können die genaue Startzeit notieren oder tragen für die Uhrzeit Nullwerte ein
var dann = new DatumZiel('Jun 8 2016 18:15:00');
var dann = new DatumZiel('Apr 23 2018 00:00:00');
   Hintergrundgrafik

Für den Counter verwende ich eine Hintergrundgrafik von 144 × 97 Pixel. Für Ihre Webseite wählen Sie eine passende eignene Hintergrundgrafik oder aber eine neutrale Farbe. Die Größe des Counters wird mit CSS-Anweisungen festgelegt. Der Wert kann angepasst werden, falls Sie eine eigene Grafik mit abweichendem Format nutzen möchten.
#Counter {
...
background: url(mein-hintergrund.gif) 0px 0px no-repeat;
}
#Counter {
...
background-color: #FFFFFF;
}
   2 Mini-Grafiken

...
background: url(flagge-deutschland.gif) 0px 0px no-repeat;
...
background: url(flagge-portugal.gif) 0px 0px no-repeat;
   AnzeigeTitel

var Text01 = "Deutschland - Portugal";



   UpDown-Counter Spielbegegnungs-Counter 01

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. Ein Zählvorgang kann die Maximal- und Minimalwerte 999:23:59:59 anzeigen, der Counter also für einen Zeitraum von 2,73 Jahren in beide Zählrichtungen eingesetzt werden.

Vor einer Hintergrundgrafik werden zwei Embleme, zwei kurze Textmeldungen und die Grafiksymbole (Ziffern) des Counters angezeigt. Wenn der Counter zunächst als DownCounter fungiert wird, schaltet er bei Erreichen des festgelegten Zeitpunkts automatisch um und beginnt mit dem UpCount.

Nach dem Umschalten vom Down- zum UpCounter wird die vorher angezeigte kurze Textmeldung (#InfoText) ab diesem Zeitpunkt durch eine andere ersetzt:

"Zeit bis zum Beginn" / "Zeit seit dem Beginn"




Aufwand für den Webmaster:

1) Script in den Head-Bereich kopieren
2) CSS-Anweisungen in den Head-Bereich kopieren
3) Aufruf der Funktion 'Spielbegegnung()' im Body-Bereich notieren
4) Grafiken im gleichen Ordner abspeichern

5) Grafiken und Text anpassen
6) Datum und Zeit anpassen



   HTML-Code im Body-Bereich

Nachdem sie das JavaScript und die CSS-Anweisungen im Head-Bereich notiert haben und die Grafiken im gleichen Ordner abgelegt wurden, 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

Spielbegegnung01()

//  End -->
</script>




Für Schnellstarter

Lassen Sie sich von den langen Erklärungen hier nicht abschrecken und führen die oben aufgelisteten Schritte durch. Am Einfachsten ist es, die ZIP-Datei herunter zu laden und zu entpacken. Grafiken und eine Demo-Datei haben Sie dann bereits auf Ihrer Festplatte.

Falls Sie dann das Modul anpassen möchten, weitere Erklärungen benötigen oder mehr über die Funktionsweise erfahren möchten, lesen Sie den betreffenden Abschnitt unten.




Bitte entnehmen Sie den gesamten Quellcode für dieses Beispiel der Textdatei (Link oben im Kopfbereich). Dort können Sie ebenfalls eine Demo- bzw. eine Beispieldatei abrufen. Infos und Erklärungen zum 'Einbauen' von JavaScript finden Sie im JavaScript Menü 01 oder gezielt auf der Seite Kurzinfo JavaScript 'einbauen'




 

   Hintergrundgrafik

Die Grafiken stelle ich Ihnen für den Counter zur Verfügung. Eine Grafik (Verlauf grau-weiß diagonal) ist im Download enthalten.






   Funktion

Der Counter errechnet die Zeitdifferenz zwischen dem Systemdatum und dem eingetragenen Zieldatum. Aus dieser Information entnimmt das Script die Werte für die Darstellung und weist entsprechende Grafiken zu, deren Anzeige im Sekundentakt auf den aktuellen Stand gebracht wird.

Beim Erreichen des Zieldatums ändert der Downcounter seine Funktion und wird zum Upcounter. Er zählt also Tage, Stunden, Minuten und Sekunden seit Verstreichen des von ihnen festgelegten Datumswertes hoch.

Das eingetragenes Counter-Ziel bzw. der Wert für die Grenze des Hoch- oder Herunterzählens wird der Variablen 'DatumZiel' zugeordnet:
var DatumZiel = new Date('January 30 2011 18:00:00');
Verwenden Sie bei dieser Schreibweise die englischsprachigen Monatsbezeichnungen. Eine Liste der engl. Monatsnamen steht als Kommentar im Quelltext.

Das Script leistet hier Schwerstarbeit! Jede Sekunde werden 9 Grafiken ausgetauscht. Das wird über die ID, die für jede Grafik vergeben und als Attribut im <img>-Tag notiert wurde, organisiert. Beispiel für eine Zifferngrafik:

<img id="z1" src="sw8.gif" width="12" height="14">



   Download alternative Zifferngrafiken

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.



ZIP-Datei



ZIP-Datei



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





   Info zum inoffiziellen EM-Logo 2008

Bei der Fußball-Weltmeisterschaft war es ein einziges Ärgernis! Wer durfte das WM-Logo verwenden, wem war es verboten? Welche Kosten fallen an?

Bei der Europameisterschaft 2008 in Österreich und der Schweiz wurde das einfacher. Um nicht Lizenzgebühren bei der UEFA zahlen zu müssen, gab es neben dem offiziellen Logo für die Europameisterschaft auch ein inoffizielles EM-Logo.

Ein Webportal in Östereich hatte einen Wettbewerb um das Logo ausgeschrieben.

Auf der Seite emlogo.at können sie alles nachlesen. Der Gewinner steht fest und das Logo wird auf der Webseite zum Download angeboten.

emlogo.at
Nutzungsbedingungen Zitat:

Das freie alternative EM-Logo kann kostenlos für jeden Zweck on- und offline verwendet werden. Es darf weder die EM, noch diesen Wettbewerb noch die Designer in schlechtes Licht rücken, noch können hier Haftungen und Ansprüche aus der Zurverfügungstellung abgeleitet werden. Wir stellen dieses Logo, das Voting etc. nur als Service für unsere Leser und die Internet-Gemeinde zur Verfügung. Bei Regelverstoß oder anderen wichtigen Gründen können wir das Nutzungsrecht auch wieder ohne Angaben von Gründen entziehen. Einen Zusammenhang mit der UEFA, der Europameisterschaft etc. gibt es nicht, das freie Logo ist nicht das offizielle EM-Logo und deshalb auch nicht an Lizenzen etc. gebunden.

Das Logo darf nicht verändert werden. Verweisen Sie bei der Bildquelle immer auf 'emlogo.at' (bei jedem Einsatz) und verlinken Sie auf 'www.emlogo.at' (zumindest einmal auf Ihrer Website - beispielsweise in einem Artikel über dieses Angebot). Einen Link zurück erhalten Sie gerne.


 




Fußball Europameisterschaft 01 - UpDown-Counter

Fußball Europameisterschaft 02 - UpDown-Counter

Fußball Weltmeisterschaft 01 - UpDown-Counter

Fußball Weltmeisterschaft 03 - UpDown-Counter

Event-Counter 01 - UpDown-Counter

Event-Counter 02 - UpDown-Counter

Event-Counter 300 - UpDown-Counter

UpDown-Counter Stundenzähler






   Counter

Grafische Counter biete ich auf meiner Seite in mehreren Varianten an. Weitere eventabhängige Counter mit entsprechenden Grafiken werden bei gegebenem Anlass rechtzeitig veröffentlicht (geplant: WM, Olympia?).