Mit einem Tool wie dem Datum Countdown-Generator kannst du schnell und einfach einen Countdown generieren. In diesem Artikel soll es nun darum gehen, wie du mit JavaScript und PHP einen solchen Countdown errechnen und darstellen kannst.

Countdown für deine Webseite

Eventuell möchtest du von deiner Webseite aus auf ein Ereignis hinweisen. Dies kannst du dann durch einen Live JavaScript-Countdown oder durch einen mit PHP realisierten Countdown lösen.

Countdown mit JavaScript

Mit JavaScript gibt es die schöne Möglichkeit einen Live Countdown zu realisieren.

JavaScript ist clientseitig, d.h. die Datei wird einmalig von deinem Server heruntergeladen. Anschließend wird dieses Script auf dem Rechner des Benutzers ausgeführt. Interessant ist dabei, dass er sich jede Sekunden aktualisiert und so „live“ herunterzählt.

function countdown() {
  window.setTimeout("countdown()", 1000);
  /* Bitte das Datum anpassen (Jahr, Monat - 1, Tag, Stunde, Minute, Sekunde) */
  var bis = new Date(2030, (12 - 1), 31, 00, 00, 00);
  var jetzt = new Date(); var rest = Math.floor((bis-jetzt.getTime())/1000);
  var wochen = 0;
  var tage = 0;
  var stunden = 0;
  var minuten = 0;
  
  if (rest >= 604800) { wochen = Math.floor(rest/604800);
    rest -= wochen*604800;
  }

  if (rest >= 86400) { tage = Math.floor(rest/86400);
    rest -= tage*86400;
  }

  if (rest >= 3600) { stunden = Math.floor(rest/3600);
    rest -= stunden*3600;
  }

  if (rest >= 60) { minuten = Math.floor(rest/60);
    rest -= minuten*60;
  }

  /* Bitte DIV-ID anpassen */
  document.getElementById('DIV-ID IN DEN GESCHRIEBEN WERDEN SOLL').innerHTML = wochen+' Wochen, '+tage+' Tage, '+stunden+' Stunden, '+minuten+' Minuten und '+rest+' Sekunden';
}

Mit diesem Code kannst du – wenn du zuvor ein Datum und eine DIV-ID angegeben hast – einen Countdown anzeigen lassen, der sich jede Sekunde aktualisiert. Du darfst diesen Code ohne Namensnennung verwenden, bei Fragen oder Problemen wende dich einfach an mich.

Bitte beachte, dass JavaScript bei der Monatszählung mit 0 statt mit 1 beginnt. Deswegen muss zum Beispiel für den Monat Oktober an Stelle einer 10 eine 9 übergeben werden, also: (10 - 1)

Ach, und vergiss nicht die Funktion countdown() auch aufzurufen, beispielsweise per onload im body Tag oder als onclick event bei dem Klick auf einen Button. Das Beispiel, das du per Klick auf den Button downloaden kannst, zeigt recht gut, wie du den Countdown verwendest.

Countdown mit PHP

Manchmal benötigt man auch einen Countdown in PHP. Dafür kannst du den folgenden Code ohne Namensnennung nutzen.

Da PHP serverseitig ist, also einmalig mit dem Seitenaufruf ausgeführt wird. Aktualisiert sich dieser Countdown nicht automatisch, erst mit einem Neuladen der Seite wird der Countdown auf den neuesten Stand gebracht.

/* Datum bitte anpassen (Stunde, Minute, Sekunde, Monat, Tag, Jahr) */
$bis = mktime(0, 0, 0, 12, 31, 2030);
$rest = $bis - time();
$wochen = 0;
$tage = 0;
$stunden = 0;
$minuten = 0;

if ($rest >= 604800) {
  $wochen = floor($rest/604800);
  $rest -= $wochen*604800;
}

if ($rest >= 86400) {
  $tage = floor($rest/86400);
  $rest -= $tage*86400;
}

if ($rest >= 3600) {
  $stunden = floor($rest/3600);
  $rest -= $stunden*3600;
}

if ($rest >= 60) {
  $minuten = floor($rest/60);
  $rest -= $minuten*60;
}

echo "$wochen Wochen, $tage Tage, $stunden Stunden, $minuten Minuten und $rest Sekunden";

Du kannst dieses Skript auch als praktische PHP-Funktion downloaden. Klicke dafür einfach auf den Button links.

Live Countdown mit PHP

Wie bereits beschrieben ist ein Live-Countdown, wie er mit JavaScript realisiert werden kann, unter PHP nicht möglich.

Eine wenig elegante Lösung besteht darin die Seite jede Sekunde zu aktualisieren, also den Benutzer per JavaScript oder HTML (siehe: Meta Tags – Welche und wie sinnvoll?) nach einer Sekunde auf die gleiche Seite weiterzuleiten. Wenn du einen Countdown für Nicht-JavaScript Nutzer erstellen möchtest, dann werden diese wohl oder übel damit leben müssen, dass der Countdown entweder „still steht“ oder sich nur alle x Sekunden aktualisiert.

Fazit: Countdowns mit JavaScript und PHP

Du siehst also, dass es nicht wirklich schwer ist einen Countdown mit JavaScript oder PHP auf deine Beine zu stellen. Das schöne an einem JavaScript-Countdown ist zudem, dass er live ist beziehungsweise sich in diesem Fall jede Sekunde automatisch aktualisiert, für Benutzer die JavaScript deaktiviert haben wird dafür nur ein PHP Countdown angezeigt, wenn du dies beispielsweise per noscript definiert hast. Du musst also abwägen, was bei dir passt.