Downcounter Zieldatum + Zeit 01
    


Home

QuellCode ZURÜCK SITEMAP  

 Counter bis Zieldatum + Zeit 01

Dynamischer Downcounter bis zu einer bestimmten Uhrzeit an einem bestimmten Datum. Zum Beispiel bis 12:14'30 am 24.12. 2020. Darstellung als Text in einem 'unsichtbaren' Formularfeld. Anzeige von

Tage - Stunden - Minuten - Sekunden

 16.06.2008, Hinweis zum Eintrag des Monats als Ziffer

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

  • Script in den Head-Bereich kopieren
  • CountDown-Ziel eintragen
  • Formular im Body-Bereich notieren
  • Anzeigefeld / - 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 legen sie die Angaben für das Formular und den Text im Input-Feld fest. Wenn sie Rand- und Hintergrundfarbe ihrem Seitenhintergrundanpassen (identische Farbwerte), ist das Formularfeld nicht erkennbar!



<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: 22px;
}

-->
</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'





30.05.2008   

NACH OBEN