Differenz in Tagen
    
 Home • Datum • DownCounter bis Beispiel  Quellcode 

 Counter 01 - Tage bis Zieldatum  6 Meldungen 1 Textmodul

Dieses JavaScript errechnet aus dem Systemdatum und ihrer Vorgabe die Differenz in Tagen und zeigt eine entsprechende Meldung an Ort und Stelle an. Die Textanzeige bietet 6 unterschiedliche Meldungen.
Downcounter / Tageszähler mit 6 Ausgabeoptionen

  Beispiel der Ausgabe  


Noch weitere X Tage bis zum 1.1.2020

Hier werden 2 Datumsangaben einbezogen:
Aktuelles Datum und Zieldatum.

Das Startdatum für den Zähler ist hier das aktuelle Systemdatum, das Zieldatum liegt in der Zukunft. Die Differenz in Tagen wird ermittelt und über eine Schreibanweisung angezeigt.
Hier sehen Sie das Resultat der Schreibanweisung:



Neben der errechneten Tagesdifferenz (Zahl) wird ein erklärender Text angezeigt. Dieser Text kann im Script festgelegt werden. Neben der üblichen Anzeige sind 5 speziellere Unterscheidungen vorgesehen:
  • für die Anzeige am vorletzten Tag vor dem Zieldatum
  • für die Anzeige am letzten Tag vor dem Zieldatum
  • für die Anzeige am Tag beim Erreichen des Zieldatum
  • für die Anzeige am Tag nach Erreichen des Zieldatums
  • für die Anzeige ab 2 Tage nach Erreichen des Zieldatums


Die alternativen Texte können Sie abändern und erscheinen in dieser Form:
  • Noch X Tage bis zum ...
  • Nur noch 2 Tage bis zum
  • Morgen ist der ...
  • Heute ist der ...
  • Gestern war der ...
  • Vor X Tagen war der ...
  • Noch X Tage bis zum Beginn des Bezirksschützenfests
  • Nur noch 2 Tage bis zum Beginn des Bezirksschützenfests
  • Ab Morgen findet unser Bezirksschützenfest statt
  • Besuchen Sie heute unser Bezirksschützenfest
  • Gestern begann unser Bezirksschützenfest
  • Unser Bezirksschützenfest begann vor X Tagen



Aufwand für den Webmaster

  • Script im Head-berich einkopieren
  • Funktionsaufruf einkopieren (im Body dort, wo der Text erscheinen soll)
  • Datum anpassen
  • Datums-Modul testen
Aufruf der Funktion 'SchreibeCountertext()' an genau der Position, wo die Anzeige erfolgen soll. 
<script type="text/javascript" language="JavaScript">
<!-- Begin
SchreibeCountertext();
// End -->
</script>

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'




für Schnellstarter

Wenn Sie der Anleitung zum Einbau folgen ist alles Notendige getan. Lassen Sie sich von den langen Erklärungen hier nicht abschrecken und führen die oben aufgelisteten Schritte durch.

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.



Zum Testen des Scripts: verstellen Sie das Systemdatum  Nachdem Sie das Datum verstellt haben, laden Sie die Seite neu, indem Sie im Browsermenü 'Aktuelle Seite neu laden' (Refresh) anklicken.



  Vorgabe des Zieldatums

das Zieldatum wird mit der Variablen "Zieldatum" festgelegt 
var Zieldatum = new date("January 1, 2020");
oder mit Uhrzeit 
var Zieldatum = new Date('Janurary 1 2020 16:00:00');

Sie müssen die englischen Bezeichnungen für den Monat eintragen! 
January February March April May June
July August September October November December



  Script im Head-Bereich

Den gesamten Code dieses JavaScripts kopieren Sie in den Head-Bereich ihrer Seite . 

<script type="text/javascript" language="JavaScript">
<!-- Begin

// W. Jansen - web-toolbox.net
// Version 15.04.2012

// Monatsnamen in englischer Schreibweise eintragen
// January February March April May June
// July August September October November December

var Zieldatum = new Date("July 27, 2016");
var TextBisZum = "Olympischen Sommerspiele 2016 in Rio de Janeiro ";

var DatumCounter = new Date();
var diff = Zieldatum.getTime() - DatumCounter.getTime();
var Tageszahl = Math.floor(diff / (1000 * 60 * 60 * 24));


if (Tageszahl > 1) {
Datumsinfo = "Noch " + Tageszahl + " Tage  bis zum Beginn der " + TextBisZum;
}
else if (Tageszahl == 1) {
Datumsinfo = "Nur noch 2 Tage bis zum Beginn der " + TextBisZum;
}
else if (Tageszahl == 0) {
Datumsinfo = "Morgen beginnen die " + TextBisZum;
}
else if (Tageszahl == -1) {
Datumsinfo = "Heute beginnen die " + TextBisZum;
}
else if (Tageszahl == -2) {
Datumsinfo = "Gestern begannen " + TextBisZum;
}
else if (Tageszahl < -2) {
Datumsinfo = "Die " + TextBisZum + " begannen vor " + Math.abs(Tageszahl+1) + " Tagen)";
}


function SchreibeCountertext() {
document.write(Datumsinfo);
}

// end -->
</script>