Trick # 305 | Dieser Beitrag beinhaltet 1125 Wörter. – Geschätzte Lesezeit: ca. 6 Minuten.
Wie lange dauert es eigentlich noch bis zum Jahreswechsel? Mit einem Countdown, bestehend aus ein klein wenig JavaScript-Code, verpassen Sie den Jahreswechsel ganz bestimmt nimmer. Wir zeigen Ihnen, wie’s geht.
Zunächst benötigen Sie ein Script, das Ihnen die Datums- und Zeitdifferenz berechnet. In der Folge sehen Sie ein solches Script – Sie können es kopieren und in den <head>-Bereich Ihrer Webseite einfügen. Falls Sie das Divi-Theme verwenden, können Sie das Script auch in ein Code-Modul kopieren:
<script>
var countDownDate = new Date("2026-01-01 00:00:00").getTime();
var x = setInterval(function() {
var now = new Date().getTime();
var distance = countDownDate - now;
var days = Math.floor(distance / (1000 * 60 * 60 * 24));
var hours = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
var minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
var seconds = Math.floor((distance % (1000 * 60)) / 1000);
document.getElementById("timer").innerHTML = "<h5>Das nächste Jahr beginnt in " + days + " Tagen " + hours + " Stunden " + minutes + " Minuten und " + seconds + " Sekunden.</h5>";
if (distance < 0) {
clearInterval(x);
document.getElementById("timer").innerHTML = "<h5>Happy New Year!</h5>";
}
}, 1000);
</script>Dort wo Sie den Timer auf Ihrer Website anzeigen lassen möchten, fügen Sie nun in der HTML-Ansicht folgenden Text ein:
<p id="timer"></p>Nun wird an der entsprechenden Stelle zurückgezählt.
Bei Ablauf der Zeit zählt der Timer nicht mehr weiter; stattdessen zeigt er – wie im Script vermerkt – «Happy New Year!» an. Die Texte können Sie natürlich ebenfalls frei anpassen.
Das war schon ziemlich einfach. Nur geht noch mehr.
Automatischer Sekundentimer
Das obige Script hat nämlich einen Haken, wenn es kurz vor Ablauf steht. Dann sind etwa unschöne Ausgaben wie «Das nächste Jahr beginnt in 0 Tagen 0 Stunden 0 Minuten und 19 Sekunden.» möglich.
Nur auf den ersten Blick ein Rechenfehler
Während der Sommerzeit von Ende April bis Ende Oktober scheint es, als ob das Script einen Rechnungsfehler macht. Rechnet man nämlich anhand der verbleibenden Stunden nach, so sieht es aus, als ob der Zähler-Endtermin auf Neujahrsmorgen um 1:00 Uhr statt um 0:00 Uhr angesetzt wäre.
Das macht jedoch nur den Anschein: Beim Wechsel auf die Winterzeit erleben wir nämlich eine Stunde doppelt. Dies wird vom Script berücksichtigt, so dass die Rechnung wieder bestens aufgeht.
Doch auch das lässt sich beheben – etwa mit einem Sekundentimer, der auf der Basis des obigen Scripts funktioniert, aber am Ende alle Ausgaben in Sekunden umrechnet. Sie können auch diese Variante kopieren und in den <head>-Bereich Ihrer Webseite einfügen. Falls Sie das Divi-Theme verwenden, können Sie das Script auch hierbei in ein Code-Modul kopieren. So sieht der Code aus:
<script>
var countDownDate = new Date("2026-01-01 00:00:00").getTime();
var x = setInterval(function() {
var now = new Date().getTime();
var distance = countDownDate - now;
var days = Math.floor(distance / (1000 * 60 * 60 * 24));
var hours = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
var minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
var seconds = Math.floor((distance % (1000 * 60)) / 1000);
var output = ((days*86400)+(hours*3600)+(minutes*60)+(seconds));
document.getElementById("timer").innerHTML = "<h5>Das nächste Jahr beginnt in " + output + " Sekunden.</h5>";
if (output < 0) {
clearInterval(x);
document.getElementById("timer").innerHTML = "<h5>Happy New Year!</h5>";
}
}, 1000);
</script>Auch in diesem Snippet können Sie die Zeile 2 anpassen und Ihr Wunschdatum einfügen – immer im Format „JJJJ-MM-TT hh:mm:ss“. Ergänzt haben wir den Code aus dem ersten Beispiel mit einer Rechenfunktion auf Zeile 10, welche die verbleibende Sekundenzahl bestimmt.
An jener Stelle auf der Website, wo der Timer eingeblendet werden soll, platzieren Sie nun in der HTML-Ansicht wiederum folgende Zeile:
<p id="timer"></p>Das sieht dann so aus:
Probieren Sie’s aus – ist recht simpel. Und übrigens: «Happy New Year!»
Und klar: Der Silvestercountdown ist nicht saisonabhängig. Er funktioniert sinngemäss natürlich mit jedem beliebigen Datum.
Werbung
Werbung
