Wie lange dauert es eigentlich noch bis zum Jahreswechsel? Mit einem Countdown, bestehend aus ein klein wenig PHP-Code, verpassen Sie den Jahreswechsel ganz bestimmt nimmer. Wir zeigen Ihnen, wie’s geht.
<script>
var countDownDate = new Date("2025-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>Eine Anpassung wird womöglich nötig sein auf Zeile 2 des Scripts. Dieses berechnet nämlich die Dauer bis zum 1.1.2025 um 00:00 Uhr. Dieses Datum können Sie anpassen. Verwenden Sie die Formatierung «JJJJ-MM-TT hh:mm:ss».
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 erhalten Sie an der entsprechenden Stelle folgendes angezeigt:
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.
<script>
var countDownDate = new Date("2025-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>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>
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
