Event-Counter 01
 HomeDatum • Counter 01 Demo-1  Demo-2  Demo-3  Quellcode  DOWNLOAD 

Event-Counter 01  dynamisch mit Hintergrundgrafik

Aus dem Systemdatum und Ihrer Vorgabe wird die Differenz errechnet und die Tages-, Stunden-, Minuten- und Sekundenwerte mit digitalen Ziffern angezeigt. Zusätzlich wird eine Textmeldung eingeblendet die beim Wechsel (up/down) verändert wird.
counter up-down-counter digital dynamisch zeit tage

grafischer Up- / Down-Counter mit Hintergrundgrafik + Text

UPDATE  neues Script, neue Grafiken auf der Download-Seite





Demo-Counter - große Abmessungen (550 × 300 Pixel)


Zur Demo einen Counter in großer Darstellung (startet nach 1 Sekunde). Vor einer Hintergrundgrafik habe ich zwei <div>-Bereiche positioniert: Einen für die Einblendung eines Textes und darunter eine Box für die grafischen Ziffern des Counters. Nach dem Start wird die Textinformation angezeigt und die 9 Ziffern werden, abhängig von berechneten Werten, ausgetauscht. Für ein regelmäßiges Update erfolgt die Berechnung und der Ziffernaustausch alle 1000 Millisekunden aufs Neue.


Der originale Counter - Abmessungen 144 × 97 Pixel

Der Counter ermöglicht in dieser Konstellation die Anzeige von 9 grafischen Ziffern und stellt den Wert im Format TTT:SS:MM:SS dynamisch dar. Dazu werden Grafiken zeitgesteuert ausgetauscht. Ein Zählvorgang kann die Maximal- und Minimalwerte 999:23:59:59 anzeigen, der Counter demnach für einen Zeitraum von 2,73 Jahren in beide Zählrichtungen eingesetzt werden.

Vor einer Hintergrundgrafik werden eine Textmeldung und die Grafiken (Ziffern) des Counters angezeigt. Wenn dieser Counter zunächst als DownCounter eingesetzt 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 ab diesem Zeitpunkt durch eine andere ersetzt: Zeit bis zum .. / "Zeit seit dem ...



Anpassung des Counters durch Austausch der Grafik

Das optische Erscheinungsbild des Counters lässt sich durch den Austausch der Hintergrundgrafik anpassen. Rechts sehen Sie eine Hintergrundgrafik für ein Filmfest und ein Beispiel für einen angepassten Couter für einen Fußball-Event (Screenshot). Ich habe dazu eine passende Grafik mit den Landesfarben Brasiliens hergestellt.

Die Grafik wird im CSS-Block festgelegt. Informationen zur Vorgehenweise bei der Anpassung finden Sie weiter unten auf dieser Seite.

Für die verschiedensten Events habe ich bereits Vorlagen erstellt. Meine Grafiken dürfen Sie für den Event-Counter frei verwenden.




Wenn Sie eine eigene Hintergrundgrafik erstellen möchten verwenden Sie die Größe 144 x 97 Pixel. Sie können auch eine Grafik oder eine Grafik-Vorlage aus meinem Angebot herunter laden. Die Auswahl ist zwar beschränkt mag aber als Anrgung ausreichen. Um eine alternative Grafik einzusetzen ändern Sie die Angaben im CSS-Block



Siehe auch: Fußballweltmeisterschaft - WM-Counter - Version 01



Aufwand für den Webmaster

Der Aufwand zum Einbau des grafischen UpDown-Counters ist recht gering: Sie kopieren das Script und die CSS-Anweisungen in den Head-Bereich Ihrer Seite. Den HTML-Code notieren Sie im Body-Bereich an der Stelle, wo der Counter erscheinen soll. Dann passen Sie das Datum an, setzen die URL für die entsprechende Hintergrundgrafik ein, fertig.

1) Script / CSS in den Head-Bereich kopieren
2) HTML-Code in den Body-Bereich kopieren
3) Alle Grafiken abspeichern
4) URL der Hintergrundgrafik eintragen
5) Das Datum anpassen



JavaScript in ein HTML-Dokument 'einbauen'



   HTML-Code im Body

Nachdem Sie das JavaScript / die CSS-Anweisungen im Head-Bereich notiert haben und die Grafiken im gleichen Ordner abgelegt haben müssen die HTML-Anweisungen für die Anzeige des Counters im Body-Bereich notiert werden. Sie tragen die Codezeilen an genau der Stelle ein, wo der Counter erscheinen soll (den vollständigen Code entnehmen Sie der Text- oder Demo-Datei).
<div id="CounterBox">
<div id="CounterText">
<div id="CounterZiffern">
(hier sind die Zifferngrafiken notiert)
</div>
</div>
</div>

   Zieldatum

Die Angabe zum Zieldatum wird im Script einer Variablen mit dem Bezeichner 'Zieldatum' zugeordnet. Der Wert wird entsprechend dem JavaScript-Datumsformat eingetragen:

Monat, Tag, Jahr, Zeit

ZielDatum mit englischen Monatsbezeichnungen eintragen!
(Jan, Feb, Apr, May, Jun, Jul, Aug, Sep, Oct, Nov, Dec)
var Zieldatum = new Date('Jun 11 2014 16:00:00');

   Hintergrundgrafik

Für den Counter verwende ich eine Hintergrundgrafik von 144 × 97 Pixel. So passt der Counter auch mit Rand noch in eine 150 Pixel breite Infospalte. Die Größe des Counters wird mit CSS-Anweisungen festgelegt. Der Wert kann angepasst werden, wenn Sie eine eigene Grafik mit abweichendem Format nutzen.
#Counter {
..
width: 144px;
height: 97px;
..
background: url(citytour.gif) 0px 0px no-repeat;
}

   Meldungstexte

Für die kurze Textmeldung wurden zwei Variablen definiert. 'Beschreibung01' beinhaltet den Wert für die meldung beim Herunterzählen, 'Beschreibung02' die Meldung die beim Hochzählen angezeigt wird.

// Texte vor / nach
var Beschreibung01 = "Zeit bis zum 14. August";
var Beschreibung02 = "Zeit seit dem 14. August";

   Immer für das aktuelle Jahr?

Wenn Sie den Schalter 'RepeatYear' auf '1' setzen arbeitet der UpDown-Counter unabhängig von der beim Zieldatum eingetragenen Jahreszahl immer für das aktuelle Jahr. Das bietet sich an wenn der Counter immer wieder bis zum / ab dem gleichen Datum rechnen soll. Das wäre z. B. bei einem Zähler für den 1. Dezember so.

Belassen Sie es bei dem voreingestellten Wert '0' wenn Sie diese zusätzliche Funktion nicht nutzen möchten.
// jährliche Wiederholung ja / nein , 1/0 ?
// 1 setzt die aktuelle Jahreszahl ein
var RepeatYear = 0;







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. Alle benötigten Dateien haben Sie dann bereits auf Ihrer Festplatte.

Einen Link zur Textdatei des Quellcodes und eine Downloadmöglichkeit als ZIP-Datei finden Sie im Kopfbereich dieser Seite. In der ZIP-Datei sind neben der HTML-Datei alle benötigten Grafiken enthalten. Meine Grafiken dürfen Sie für den Counter frei verwenden.

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



Infos und Erklärungen zum 'Einbauen' von JavaScript finden Sie im JavaScript Menü 01 oder gezielt auf der Seite Kurzinfo JavaScript 'einbauen'







Limit 2 Jahre 266 Tage

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. Die digitalen Ziffern habe ich selbst erstellt und liegen in diversen Versionen vor.
screenshot


Hintergrundgrafik austauschen

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). Sie können außerdem eine Grafik aus meinem Angebot herunter laden. Die Auswahl ist zwar beschränkt, mag aber als Anrgung ausreichen. weitere Hintergrundgrafiken


   Dateiname für die Hintergrundgrafik notieren

Um eine alternative Grafik einzusetzen ändern Sie die Angaben im CSS-Code für die Counterbox und tragen den entsprechenden Dateinamen ein:
#CounterBox {
position: relative;
top: 0px;
left: 0px;
...
/* Pfad und Dateiname Hintergrundgrafik */
background: url(bg-citytour02.gif) #FFFFFF;
...
}



Event-Counter-Grafiken kostenlos in meiner Mini-Image-Box

Eine große Auswahl selbst erstellter Symbole und Mini-Grafiken finden Sie in meiner Mini-Image-Box, die Grafik-Werkstatt der Web-Toolbox. Die Auswahl umfasste 2016 bereits 9000 Grafiken.

⏵Mini-Image-Box - kostenlose Grafiken  

⏵Mini-Image-Box - Event-Counter-Grafiken  





 

Passende Zifferngrafiken für diesen Counter

Hier haben Sie die Möglichkeit den Set der Ziffern separat herunter zu laden. In diesen beiden ZIP-Dateien sind alle Ziffern, ein Trennzeichen und eine transparente Grafik enthalten. Wenn die Grafiken zum Einsatz kommen sollen, beachten Sie die Einträge der Dateinamen im Scriptcode (Array) und im HTML-Code Div-Bereich 'CounterZIffern').









Varianten durch alternative Ziffern-Grafiken

Falls Sie für diesen Counter kleinere / größere Grafiken verwenden möchten muss der ScriptCode angepasst werden. Alternativ und mit weniger Aufwand können Sie auf ein anderes Counter-Modul ausweichen.

Meine Counter-Module werden in unterschiedlichen 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 ändern. Countervarianten finden Sie im Menü links.




Ziffern-Grafiken kostenlos in meiner Mini-Image-Box

Ich habe 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. Grafiken für meine Counter, Datums- und Zeitanzeigen finden Sie auf meiner Webseite Mini-Image-Box.

Eine große Auswahl selbst erstellter Symbole und Mini-Grafiken finden Sie in meiner Mini-Image-Box, die Grafik-Werkstatt der Web-Toolbox. Die Auswahl umfasste 2016 bereits 9000 Grafiken.

⏵Mini-Image-Box - kostenlose Grafiken  

⏵Mini-Image-Box - Ziffern-Grafiken  




Auszug des Angebots als Screenshot






Querverweis Counter 13 - mit und ohne Hintergrundgrafik

Falls Sie einen Counter mit größeren Abmessungen suchen schauen Sie doch einmal auf das Modul 'Counter 13'. Der Counter hat das Format 300 × 215 Pixel, ist ähnlich aufgebaut, arbeitet ohne grafische Ziffern und kann mit und ohne Hintergrundgrafik eingesetzt werden. Unten ein Sceenshot mit 4 Beispielen in verkleinerter Darstellung (267 × 191 Pixel).



Counter 13 Breite 300px - Werte in 2 Div-Bereichen + Beschreibungstext







Das könnte Sie auch interessieren: