Im JavaScript Code müssen die Termine chronologisch mit Datum (Format siehe Kommentar im Quelltext) und Text angelegt werden. Der Code berechnet automatisch den nächsten Termin in der Zukunft und den dazugehörigen Countdown. Liegen alle angelegten Termine in der Vergangenheit, so wird der komplette Countdown-Text nicht mehr angezeigt. Individuelle Anpassungen, z.B. mit einem Hinweis nach Ablauf des letzten Datums sind nachträglich leicht einfügbar.
Als Beispiel auf dieser Seite dient ein Countdown bis zum nächsten Jahreswechsel.
Beispiel
Der JavaScript-Code:
// -------------------------------------------------------------------
// ------------- Autor: Patrick Saar - www.patrick-saar.de -----------
// ---------------------- JS Countdown v. 1.1 ------------------------
// ------------------ Copyright 2012 Patrick Saar --------------------
// -------------------------------------------------------------------
function countdown() {
var tage = 'Tage';
var countdown_d, countdown_h, countdown_m, countdown_s;
var ausgabe_s, ausgabe_m, ausgabe_h;
var endTime = [];
var text = [];
var i = 0;
// Hier alle Termine chronologisch(!) mit Datum und Text anlegen
endTime[0] = new Date(2015, 0, 1, 0, 0, 0); //Jahr, Monat - 1 !!!!!!!, Tag, Stunden, Minuten, Sekunden
text[0] = 'zum Jahreswechsel 2014/2015';
endTime[1] = new Date(2016, 0, 1, 0, 0, 0); //Jahr, Monat - 1 !!!!!!!, Tag, Stunden, Minuten, Sekunden
text[1] = 'zum Jahreswechsel 2015/2016';
endTime[2] = new Date(2017, 0, 1, 0, 0, 0); //Jahr, Monat - 1 !!!!!!!, Tag, Stunden, Minuten, Sekunden
text[2] = 'zum Jahreswechsel 2016/2017';
endTime[3] = new Date(2018, 0, 1, 0, 0, 0); //Jahr, Monat - 1 !!!!!!!, Tag, Stunden, Minuten, Sekunden
text[3] = 'zum Jahreswechsel 2017/2018';
endTime[4] = new Date(2019, 0, 1, 0, 0, 0); //Jahr, Monat - 1 !!!!!!!, Tag, Stunden, Minuten, Sekunden
text[4] = 'zum Jahreswechsel 2018/2019';
endTime[5] = new Date(2020, 0, 1, 0, 0, 0); //Jahr, Monat - 1 !!!!!!!, Tag, Stunden, Minuten, Sekunden
text[5] = 'zum Jahreswechsel 2019/2020';
// Berechnung des nächsten Termins
var timeNow = new Date();
while((endTime[i] - timeNow) < 0) {
i++;
}
var diffTime = endTime[i] - timeNow; //in Millisekunden
diffTime = Math.floor(diffTime/1000);
//Berechnung der Tage, Stunden, Minuten, Sekunden
if(diffTime >= 0) {
countdown_d = Math.floor(diffTime / 86400);
diffTime = diffTime % 86400;
countdown_h = Math.floor(diffTime / 3600);
diffTime = diffTime % 3600;
countdown_m = Math.floor(diffTime / 60);
countdown_s = diffTime % 60;
if(countdown_s < 10) ausgabe_s = '0'+countdown_s;
else ausgabe_s = countdown_s;
if(countdown_m < 10) ausgabe_m = '0'+countdown_m;
else ausgabe_m = countdown_m;
if(countdown_h < 10) ausgabe_h = '0'+countdown_h;
else ausgabe_h = countdown_h;
if(countdown_d == 1) {
tage = 'Tag';
}
// verbleibende Zeit und Termintext schreiben
document.getElementById('countdown').innerHTML = 'Noch <b>'+countdown_d+'</b> '+tage+' und <b>'+ausgabe_h+':'+ausgabe_m+':'+ausgabe_s+
'</b> bis '+text[i];
}
else {
document.getElementById('countdown').style.display = 'none';
}
setTimeout(countdown, 1000);
}
window.onload = countdown(); // Countdown anstoßenDie einfache Einbindung in HTML:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta autor="Patrick Saar" />
<title>JS Countdown</title>
</head>
<body>
<div id="countdown" style=" font-family: 'Courier New', Courier, monospace; font-size: 16pt; margin: 30px;"></div>
<script src="js-countdown.js"></script>
</body>
</html>1,27 KB - Downloads: 3571
