Umsetzung eines JavaScript Countdowns als Timer für ein Ereignis

Egal ob Geburtstage, Jubiläen, Gedenktage oder auch Feiertage: Mit dem JavaScript Countdown Timer können Sie einen Counter auf Ihrer Website einbauen, der die bis zum jeweiligen Termin verbleibende Zeit anzeigt. Aber auch die abgelaufene Zeit seit einem bestimmten Termin kann mit Hilfe des Timers angezeigt werden.

Das Script unten implementiert dazu einen Countdown, der die verstrichene bzw. die verbleibende Zeit zu einem angegebenen Termin berechnet und diesen Zeitraum dann in einem Ausgabe-Element ausgibt. Die Funktion differenz hat dabei die Aufgabe die zeitliche Differenz zwischen den beiden übergebenen Terminen (Angaben werden in Form von Timestamps entgegengenommen) zu berechen. Sie liefert ein Objekt zurück, welches die berechneten Komponenten, aufgeteilt in Anzahl der Tage, Stunden, Minuten und Sekunden, enthält.

Mit der Funktion update_countdown wird die Ausgabe des Countdowns aktualisiert. Diese Methode wird einmal pro Sekunde aufgerufen damit der Countdown stets aktuell gehalten wird. Gestartet wird diese zyklische Ausführung durch die später im Script folgende Funktion zur Initialisierung des Countdowns (countdown_timer). Dazu bedient sich das Script der Methode setInterval(), die das zyklische Ausführen einer Funktion ermöglicht.

SetInterval gehört, neben anderen Methoden zum JavaScript-Objekt Window. Im Gegensatz zur Methode setTimeout(), welche ebenfalls zum Window-Objekt gehört aber die übergebene Funktion nach Aulauf eines Timeouts nur einmal startet, führt setInterval die Funktion zyklisch aus bis der Zyklus durch Nutzung der Methode clearInterval beendet wird oder die Seite verlassen wird.

Neben dem Termin in Form eines Datum-Objekts erwartet die Funktion update_countdown die ID des Ausgabeelements, welches später die Informationen darstellen soll. Die Ausgabe wird in Form einer Zeichenkette zusammengestellt, wobei die Berechnung der zeitlichen Differenz durch die Funktion differenz erledigt wird. Diese zeitliche Differenz wird in einem Ausgabestring in Textform zusammengestellt. Optional kann der Funktion update_countdown auch eine mit dem Ausgabestring zu verknüpfende Beschreibung des Termins angegeben werden. Am Ende der Funktion update_countdown wird mit der Document-Methode getElementById() das Element ermittelt, in dem laut Parameter element_id die Ausgabe erfolgen soll. Das von der Funktion zusammengesetzte Ausgabestring überschreibt den bisherigen Inhalt des HTML-Elements.

Die letzte Funktion im unteren Script-Abschnitt dient der Initialisierung des Countdowns. Hier wird ebenfalls die ID des Ausgabeelements, der Termin in Form eines Datum-Objekts und optional die Terminbeschreibung angegeben. Aufgabe der Funktion ist es zu prüfen, ob das Ausgabeelement im HTML-Elementbaum vorhanden ist und ggf. ein Textelement als Kind einzufügen, falls ein solches noch nicht existiert. Außerdem prüft die Funktion nach, ob der Parameter termin ein Objekt von Typ Date enthält – auf diese Weise wird Fehlern bei Angabe eines falschen Datentyps vorgebeugt. Sind die genannten Rahmenbedingungen gegeben, so wird die Funktion update_countdown direkt aufgerufen – ist nötig, damit die Anzeige nicht erst nach Ablauf des Timeouts von einer Sekunde erfolgt – und dann der zyklische Aufruf der Funktion durch setInterval gestartet.

<script language="javascript" type="text/javascript">
<!-- // JavaScript-Bereich für ältere Browser auskommentieren
// Funktion berechnet die Differenz zwischen zwei Zeitstempeln
function differenz (d1, d2) {
  // Ist der Timestamp d1 < d2, dann müssen die beiden Werte
  // getauscht werden, da sonst negative Werte berechnet werden.
  if (d1 < d2) {
    var d = d1;
    d1 = d2;
    d2 = d;
  }
  // Vergangene Zeit in ihre Komponenten umrechnen.
  // Vergangene Tage berechnen,...
  var t = Math.floor ((d1 - d2) / (24 * 60 * 60 * 1000));
  // verstrichene Stunden berechnen,...
  var s = Math.floor (((d1 - d2) - (t * 24 * 60 * 60 * 1000)) / (60 * 60 * 1000));
  // Minuten, die zwischenzeitlich vergangen sind...
  var m = Math.floor (((d1 - d2) - (t * 24 * 60 * 60 * 1000) - (s * 60 * 60 * 1000)) / (60 * 1000));
  // und die Sekunden.
  var sec = Math.floor (((d1 - d2) - (t * 24 * 60 * 60 * 1000) - (s * 60 * 60 * 1000) - (m * 60 * 1000)) / 1000);
  // Berechnete Differenz als Rückgabe per Objekt liefern.
  return { 't': t, 's': s, 'm': m, 'sec': sec };
}

// Funktion, welche den Countdown-Timer zyklisch im Ausgabeelement ausgibt.
function update_countdown (element_id, termin, beschreibung) {
  // Datumsobjekt mit aktuellem Datum und ktueller Zeit erzeugen.
  // Von diesem Timestamp ausgehend wird die Differenz zum Termin
  // berechnet.
  var now = new Date ();
  // Varaiable zur Speicherung der auszugebenen Zeichenkette
  // für den Countdown.
  var ausgabe;
  // Variable zur Speicherung der Differenz zwischen Termin und
  // aktuellem Zeitpunkt.
  var diff;
  if (now.getTime () > termin) {
    // Termin war schon
    ausgabe = 'Vor ';
    // Berechnung der Differenz zwischen dem Termin und
    // dem aktuellen Zeitpunkt.
    diff = differenz (now.getTime (), termin);
    // Zeitliche Differenz an das Ausgabestring hängen.
    ausgabe += diff.t + ' Tage, ' + diff.s + ' Stunden, ' + diff.m + ' Minuten und ' + diff.sec + ' Sekunden';
    // Wurde keine Beschreibung des Termins angegeben, so wird
    // ein Standard-String ausgegeben.
    ausgabe += ' war ' + (beschreibung ? beschreibung : 'der Termin!');
  }
  else {
    // Termin in Zukunft
    ausgabe = 'Nur noch ';
    // Wie lange dauert es noch, bis zum Termin?
    diff = differenz (termin, now.getTime ());
    // Ermittelte Werte an Ausgabe anhängen.
    ausgabe += diff.t + ' Tage, ' + diff.s + ' Stunden, ' + diff.m + ' Minuten und ' + diff.sec + ' Sekunden';
    // Auch hier wird ein Standard-String ausgegeben, wenn keine
    // Terminbeschreibung angegeben wurde.
    ausgabe += ' bis ' + (beschreibung ? beschreibung : 'zum Erreichen des Termins!');
  }
  // Ausgabe der zusammengesetzten Zeichenkette
  document.getElementById (element_id).firstChild.data = ausgabe;
}

// Initialisierung des Countdown-Timers
// Als Parameter werden die ID des Anzeigeelements, ein Termin als Date-Objekt
// uns eine optionale Beschreibung des Termins übergeben.
function countdown_timer (element_id, termin, beschreibung) {
  // Der Timer funktioniert nur, wenn ein HTML-Element mit der übergebenen ID
  // existiert! Ist dies nicht der Fall, so passiert nichts.
  if (document.getElementById (element_id)) {
    // Hat das Element bereits ein Kindelement?
    if (!document.getElementById (element_id).firstChild)
      // Falls nicht, so wird ein leerer Textknoten erzeugt und in den
      // Elementbaum eingefügt. Dieser Textknoten wird künftig mit der 
      // jeweiligen Ausgabe des Countdowns überschrieben.
      document.getElementById (element_id).appendChild (document.createTextNode (''));
    // Wurde ein gültiges Datum übergeben, so dass eine Berechnung
    // des Countdown-Timers möglich ist?
    if (termin instanceof Date) {
      // Update des Timers direkt aufrufen, damit dieser nicht erst nach Ablauf einer
      // Sekunde angezeigt wird.
      update_countdown (element_id, termin.getTime (), beschreibung);
      // Countdown Timer einmal pro Sekunde akutalisieren
      window.setInterval ('update_countdown (\'' + element_id + '\', ' + termin.getTime () +
              (beschreibung ? ', \'' + beschreibung + '\'' : '') + ')', 1000);
    }
  }
}
// -->
</script>

JavaScript Countdown Timer Beispiel

Im unteren Anwendungsbeispiel werden zwei Countdowns angezeigt, die zum Einen die vergangene Zeit seit einem Ereignis – hier seit dem 1.1.2007 – und zum Anderen die Zeit bis zu einem künftigen Ereignis, dem 1.1.2015, anzeigt. Hierzu werden die jeweiligen Countdown-Timer durch Aufruf der Funktion countdown_timer initialisiert. Beim ersten Aufruf wird, neben einem Datum-Objekt, in dem der Termin angegeben wird, auch ein String angegeben, in dem der Termin beschrieben ist. Beachten Sie bitte, dass der zweite Parameter des Date-Objekts, mit dem der Monat angegeben wird, bei 0 (für Januar) beginnt. Nähere Informationen zur Initialisierung des Date-Objekts finden Sie in der Beschreibung dieses Objekts. Wird die Beschreibung, wie im zweiten Fall des Beispiels, nicht angegeben, so gibt das Script die in der Funktion update_countdown angegebenen Zeichenketten aus.

<!-- Feld zur Ausgabe des ersten Countdowns -->
<span id="countdown"></span><br>
<!-- Feld zur Ausgabe des zweiten Countdowns -->
<span id="countdown2"></span>
<script language="javascript" type="text/javascript">
<!-- // JavaScript-Bereich für ältere Browser auskommentieren
// Countdown zum 1.1.2007 anzeigen
countdown_timer ('countdown', new Date (2007, 0, 1), 'der 1.1.2007!');
// Countdown zum 1.1.2015 anzeigen
countdown_timer ('countdown2', new Date (2015, 0, 1));
// -->
</script>


Letzte Posts aus unserem Forum

Probleme mit iphone

Hallo, ich habe ein Problem bei der Darstellung einer Webseite. In allen Browsern hat das bisher bestens funktioniert außer beim iPhone und iPad, wo ... » mehr

von Finlay am Dienstag, 10. Juli 2012 19:45 in JavaScript - noch nicht beantwortet

Stream musik

Hallo, ich bin auf der Suche nach einem Script, mit dem ich einen Leser für Audio-Spuren in eine Html-Webseite einfügen kann. Ich brauche dabei ... » mehr

von Finlay am Sonntag, 22. Januar 2012 22:52 in JavaScript - bisher 2 Antworten
Letzter Beitrag: Dienstag, 8. Mai 2012 16:04 von maharadja

ich habe das mal mit jplayer probiert und bei mir gings ... » mehr

Byte Array PDF im Browser anzeigen

Hallo, ich bekomme von einem Webservice ein PDF als Byte Array. Mit einem JsonP Request habe ich das Byte Array so wie es ist (als Array von Bytes) ... » mehr

von TiloS am Mittwoch, 11. April 2012 17:37 in JavaScript - noch nicht beantwortet

Überbelnd effect in javascript gallerie

ich habe hier einie gallerie die funktioniert problem los aber hat noch kein über belnd effect jedoch würde ich diesen gerne einfügen aber ich habe ... » mehr

von faebe am Freitag, 20. Januar 2012 20:19 in JavaScript - noch nicht beantwortet

XML per JavaScript verarbeiten - IE

Hallo! Vielen Dank für das super kommentierte Script-Beispiel zur Weiterverarbeitung von XML-Dateien per JavaScript: ... » mehr

von gn0me am Freitag, 11. März 2011 19:03 in JavaScript - noch nicht beantwortet


¬ Insolvenzrecht