 Downcounter 03 - dynamische Anzeige
Dynamischer Counter ohne Grafiken der bis zum festgelegten Datum herunter zählt. Nach Überschreiten des Datums wird die Anzeige auf Null gestellt. Counter bis zur EM, Oympiade, Wintersaison, Weihnachten, Geburtstag, ...
|
|
Darstellung der Zeitwerte in mehreren 'unsichtbaren' Formularfeldern
XXXX Tage XX Std XX Min XX Sek
Die Anzeige wird im Sekundentakt aktualisiert. Dabei wird eine schlichte Anzeige 'ohne Schnörkel' generiert.
Das Zieldatum liegt immer in der Zukunft. Am Kalendertag nach Überschreiten des Zieldatums werden sämtliche Ziffern auf Null gestellt.
(zusätzlich: Alert-Meldung)
|
 |
Hier sehen sie die Anzeige als Countdown bis 24. Dezember 2020.
Aufwand für den Webmaster
- Script in den Head-Bereich einkopieren
- CSS-Anweisungen in den Head-Bereich einkopieren
- Kalenderformular im Body notieren
- Zieldatum anpassen
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'
Zum Testen des Scripts:
verstellen Sie das Systemdatum  Nachdem sie das Datum verstellt haben, laden sie die Seite neu, indem sie 'Aktuelle Seite neu laden' (Refresh) anklicken.
Anwendung
Script für einen Counter mit oder ohne Beschreibung. Das Erscheinungsbild des Counters hängt von ihrer gewählten Schriftformatierung und 'Verpackung ab. Die meisten Angaben sind leicht anpassbar über CSS-Einträge festgelegt.
Zieldatum und Zeit festlegen
Datum und Uhrzeit für das CountDown-Ziel werden in der Variablen 'ZielDatum' abgelegt. Dazu haben sie Varianten zur Auswahl:
1) Notierung als Ziffernfolge
Bitte halten sie sich an die Norm der Datumsvorgabe und trennen die Eingabewerte durch ein Komma:
Eintrag in der Reihenfolge: Jahr, Monat-1, Tag, Stunden, Minuten, Sekunden
Um bis zum 24. Dezember 2020 um 12:10 Uhr herunter zu zählen, müssen demnach folgende Werte eingetragen werden:
var ZielDatum = new Date(2020,11,24,12,10,00);
Kalendermonatszahl - 1 (minus Eins)
Wenn das Datum als Ziffernfolge eingetragen wird beachten sie, dass der Monatswert in der für JavaScript üblichen Zählweise, beginnend bei Null notiert werden muss. Denn im Array (Register) der Monatsnamen ist der Januar das Arrayelement 0 (Null), Februar das Element 1 (Eins), März das Element 2 (Zwei), ...
Demnach ist der Dezember im Register der Monate das ArrayElement 11. Sinnvolle Werte für den Monatseintag sind Zahlen von 0 bis 11.
2) Notierung als Datumsfolge
Wenn sie bis 24 Uhr des Zieldatums herunterzählen möchten, können die Einträge für die Zeit (Std, Min, Sek) auch entfallen. Die alternative Eintrageform sieht ein wenig anders aus. Sie müssen allerdings die englischen Bezeichnungen für den Monatsnamen verwenden!
Eintrag in der Reihenfolge: Monatsname Tag Jahr Zeit
var ZielDatum = new Date("December 24 2020 12:10:00");
Englische Schreibweise des Monatsnamens beachten:
January, February, March, April, May, June, July,
August, September, October, November, December
CSS-Formatierungen
Die Formularfelder werden mit CSS formatiert. Dabei unterscheide ich grundsätzlich die Größe der Felder für 5 bzw. 2 Ziffern (five, two).
Die Formatierung der Tabellenzellen ist ebenfalls mittels CSS festgelegt (td.kal)
<style type="text/css">
<!--
/* Formatierung Tabellenzellen */
td.kal {
font-family:Verdana,Arial,Helvetica;
font-size:11px;
font-weight:normal;
color: #000000;
background: #F8F8F8;
}
/* Formatierung Std Min Sek 2-stelliges Feld */
.two {
color: #000000;
border: none;
width: 25px;
text-align:right;
background: #F8F8F8;
}
/* Formatierung Feld Tagesszahl 5-stelliges Feld */
.five {
color: #000000;
border: none;
width: 30px;
text-align:right;
background: #F8F8F8;
}
-->
</style>
|
Home • Datum • Downcounter 03
Demo 1