Countdown in JavaScript II

Hier finden Sie nun einen Countdown, der seine Ausgabe mitten in den Fließtext einbetten kann. Die Ausgabe muss also nicht notwendig eine eigene Box sein. Zudem kann der Countdown laufen und somit die Anzeige kontinuierlich auffrischen.

Darüber hinaus können Sie das Javascript direkt von meinem Server laden und nutzen.

Der Source

Wir erstellen eine Datei countdown.js, die das Javascript enthält (oder laden es direkt von meinem Server, siehe Beispiel):

// countdown II - Thomas Salvador, 2010, brauchbar.de
// free to use, if this notice is kept intact

var countdown_data = new Array();

function countdown_define(name,y,m,d,h,i,s) {
  if (!h) { h = 0; }
  if (!i) { i = 0; }
  if (!s) { s = 0; }
  countdown_data[name] = new Array(name,y,m,d,h,i,s);
}

function countdown_update() {
  now = new Date();
  for (var name in countdown_data) {
    container = document.getElementById(countdown_data[name][0]);
    y = countdown_data[name][1];
    m = countdown_data[name][2];
    d = countdown_data[name][3];
    h = countdown_data[name][4];
    i = countdown_data[name][5];
    s = countdown_data[name][6];

    if (m == 0) {
      if ( d>= now.getDate()) {
        m = now.getMonth()+2;
      } else {
        m = now.getMonth()+1;
      }

      m = m % 12;
    } else {
      m--;
    }

    if (y == 0) {
      y = now.getFullYear();
      if ((m < now.getMonth()+1)
        || ((m == now.getMonth()+1) && (d >= now.getDate()))) {
        y++;
      }
    }

    date = new Date(y,m,d,h,i,s);

    diff_abs = date.getTime()-now.getTime();
    diff_sec = Math.floor(diff_abs / 1000);
    diff_min = Math.floor(diff_sec / 60);
    diff_sec =  diff_sec % 60;
    diff_hour = Math.floor(diff_min / 60);
    diff_min = diff_min % 60;
    diff_day = Math.floor(diff_hour / 24);
    diff_hour = diff_hour % 24;

    output = "";
    output = output+(diff_day != 0 ? diff_day+"d " : "");
    output = output+(diff_hour != 0 ? diff_hour+"h " : "");
    output = output+(diff_min != 0 ? diff_min+"m " : "");
    output = output+(diff_sec != 0 ? diff_sec+"s " : "");

    container.innerHTML = output.substring(0,output.length-1);

  }

  setTimeout('countdown_update()',1000);
}

Die Dokumentation

Das Script unterstützt beliebig viele Countdowns auf der Seite. Die Daten werden in countdown_data verwaltet, die mit Funktionsaufrufen von countdown_define(name, jahr, monat, tag) gefüllt werden.

Verwenden Sie countdown_define(name, jahr, monat, tag, stunde, minute, sekunde), wenn Sie bis zu einer genauen Zeit zählen lassen möchten.

Name ist dabei die id des Platzhalters, der gefüllt werden soll. jahr, monat und tag definieren das Zieldatum. stunde, minute und sekunde definieren sie Zielzeit. Wenn nicht angegeben, wird Mitternacht 00:00:00 angenommen.

Wie schon beim Vorgänger werden auch wiederkehrende Daten ermöglicht. Hier jedoch verallgemeinert.

Setzen Sie Jahr auf 0, wenn Sie zu einem jährlichen Ereignis zählen möchten. Setzen Sie auch Monat auf 0, wenn es ein monatliches Ereignis ist.

Die eigentliche Arbeit erfüllt countdown_update(), der alle definierte Countdowns abarbeitet.

Zunächst werden die Daten des Countdowns in lokale Variablen übernommen und im Falle eines wiederkehrenden Ereignis das relevante Jahr bestimmt.

Durch Vergleich mit dem aktuellen Datum now wird bestimmt, ob der Termin im aktuellen oder nächsten Monat des aktuellen oder nächsten Jahres liegt.

Der so bestimmte Termin selbst wird in date abgelegt.

Dann wird mit diff_abs die Differenz zum aktuellen Zeitpunkt bestimmt in Millisekunden bestimmt. Hierbei kommt getTime() zum Einsatz, der die Zeitstempel in Millisekunden seit Januar 1970 ausdrückt.

Durch Division durch 1000 wird daraus die Differenz in Sekunden diff_sec.

Auf Basis der jeweiligen Komponente wird die nächste bestimmt und die aktuelle zum Rest. Zum Beispiel für Sekunden und Minuten:

  diff_min = Math.floor(diff_sec / 60);
  diff_sec = diff_sec % 60;

Hier entsteht diff_min als ganzzahliger Wert der Division des Sekundenabstandes diff_sec. diff_sec selbst wird danach die restlichen Sekunden zugewiesen.

Beispiel

Ist der Abstand diff_sec = 217, so folgt diff_min = Math.floor(217/60) = 3 und diff_sec = 217 % 60 = 37.
217 Sekunden sind also 3 Minuten und 37 Sekunden.

Dies wird noch für Stunden und Tage wiederholt und hat dann alle Komponenten bestimmt.

Aus den verfügbaren Komponenten wird eine Ausgabe aufgebaut und diese dann im entsprechenden Container platziert.

Abschließend wird die Ausführung von countdown_update() mit Hilfe von setTimeout() erneut angefordert.

Die Verwendung

Sie müssen das Javascript einbinden, die Countdowns definieren und dann diese dann starten.

Zur Einbindung platzieren Sie im Kopfbereich Ihres Dokumentes die Anweisung

<script type="text/javascript" src="countdown.js"></script>

Sie können es direkt von meinem Server laden:

<script type="text/javascript" src="https://brauchbar.de/services/countdown-100.js"></script>

Nun legen Sie fest, wo ein Countdown stehen soll und erzeugen dort einen leeren Container mit entsprechendem Namen:

<span id="meincountdown"></span>

Erzeugen Sie im Kopfbereich eine Funktion, die ihre Countdowns definiert und startet:

<script type="text/javascript"><!--
function mycountdown() {
  countdown_define("meincountdown", 2012, 12, 21);
  countdown_update();
}
//-->
</script>

Abschließend lassen Sie dieses Script starten, wenn das Dokument geladen wurde. Geeignet ist hier der onload-Event des <body>-Tag:

<body onload="mycountdown();">

Das Beispiel

<html>
<head>
<title>Countdown-Beispiel</title>
<script type="text/javascript"
  src="https://brauchbar.de/services/countdown-100.js"></script>
<script type="text/javascript"><!--
  function mycountdown() {
    countdown_define("maya", 2012, 12, 21);
    countdown_define("weihnachten", 0, 12, 24);
    countdown_define("erster", 0, 0, 1);
    countdown_define("ersterprimetime", 0, 0, 1, 20, 15, 0);
    countdown_update();
  }
//-->
</script>
</head>
<body onload="mycountdown();">
<p>Bis zum Ende des Maya-Kalender sind es noch <span id="maya"></span>.
Es sind noch <span id="weihnachten"></span> bis Heilig Abend.
Der nächste Erste kommt bestimmt und zwar in <span id="erster"></span>.
Prime Time des nächsten Ersten in <span id="ersterprimetime"></span>.</p>
</body>
</html>

Das sieht dann so aus:

Bis zum Ende des Maya-Kalender sind es noch . Es sind noch bis Heilig Abend. Der nächste Erste kommt bestimmt und zwar in . Prime Time des nächsten Ersten in .