 Counter 04 - Downcounter bis Zieldatum
Dynamischer Downcounter bis zu einer bestimmten Uhrzeit an einem bestimmten Datum. Zum Beispiel bis 12:14'30 am 24.12. 2020. Darstellung des gesamten Textstrings in einem 'unsichtbaren' Formularfeld.
|
|
Tage, Stunden, Minuten, Sekunden + Beschreibungstext
Keine aufwendige Positionierungs-Anweisungen für die unterschiedlichen Browser. Die Information wird genau dort angezeigt, wo sie das Formularfeld für die Anzeige notieren.
Hinter den berechneten Werten wird eine Beschreibung angehängt, die sie in einer Variablen (Beschreibung) ablegen können.
var Beschreibung = "Heiligabend 2020";
Aufwand für den Webmaster
- Script in den Head-Bereich kopieren
- CountDown-Ziel eintragen
- Formular / Formularfeld im Body-Bereich notieren
- Beschreibungstext eintragen
- Formularfeld für die Anzeige / Text formatieren
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
Ausgabe / Anzeige des Counters
Im Body-Bereich an entsprechender Stelle notieren:
<form>
<input readonly class="anzeige" type="text" id="Zeit">
</form>
class="anzeige"
Formatierung
Mit CSS-Anweisungen im Head der Seite werden Angaben für die Unterklasse 'anzeige' fetgelegt:
<style type="text/css">
<!--
.anzeige {
font-size:12px;
color:#6F6F6F;
background-color: #F0F4FF;
text-align:center;
border: 1px solid #6F6F6F;
width: 545px;
padding:3px;
height: 24px;
}
-->
</style>
'unsichtbares' Formularfeld
Wenn sie Rand- und Hintergrundfarbe ihrem Seitenhintergrund anpassen (identische Farbwerte), ist das Formularfeld als solches nicht erkennbar!
<style type="text/css">
<!--
.anzeige {
font-size:12px;
color:#0000FF;
background-color: #FFFFFF;
text-align:center;
border: none;
width: 545px;
padding:3px;
height: 24px;
}
-->
</style>
Testen
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.
Querverweise:
 Downcounter bis Neujahr für die Statuszeile
Downcounter bis Neujahr 02 (Monate Tage Std Min Sec)
weitere Counter finden sie im Menü 'Datum'
|
Home • Zeit • Counter bis Zieldatum 01
QuellCode
drucken 