Ein Countdown mit JavaScript, der Jahre, Monate, Tage, Stunden, Minuten und Sekunden bis zu einem beliebigen Zeitpunkt herunterzählt. (Neue Version!)
Erfolgreich getestet mit Internet Explorer 5.5 und 6.0, Netscape 4.75, 6.1, 7.0 und 7.1, Mozilla 1.0, 1.21 und 1.4 sowie Opera 6.01, 7.01 und 7.23.
Wegen der unterschiedlichen Monats- und Jahreslängen ist ein Countdown mit nur Tagen, Stunden, Minuten und Sekunden zwar 'genauer', aber auch langweiliger und unübersichtlicher. (Wer kann z.B. schon auf den ersten Blick erkennen, wieviele Jahre und Monate in etwa 820 Tagen entsprechen.)
Ein kleines Problem bieten auch die verschiedenen Zählweisen: Zählt man zum Beispiel vom 25.03 zum 8.10 zunächst 6 volle Monate, erhält man rechnerisch den 25.09. Bis zum 08.10 sind es dann noch 5 Tage im September und 8 Tage im Oktober. Der Countdown steht damit bei 6 Monaten und 13 Tagen. Zählt man andererseits erst die dazwischenliegenden 6 Monate (April-September) und addiert die restlichen Tage des Start- und des Ziel-Monats (6+8) steht der Countdown bei 6 Monaten und 14 Tagen.
Ich habe mich für die letztere (m.E. intuitivere) Variante entschieden. (Wer es anders sieht, rechne doch mal das vorstehende Beispiel mit dem 31.03 als Start-Datum durch.)
Demo:
Die Spannung steigt. Nur noch
bis zum 22.2.2222, 22:22:22 Uhr.
Der Quelltext:
<html>
<head>
<title>Datum-Countdown mit JavaScript</title>
<script language="JavaScript">
// Ziel-Datum in MEZ
var jahr=2222, monat=2, tag=22, stunde=22, minute=22, sekunde=22;
var zielDatum=new Date(jahr,monat-1,tag,stunde,minute,sekunde);
function countdown() {
startDatum=new Date(); // Aktuelles Datum
// Countdown berechnen und anzeigen, bis Ziel-Datum erreicht ist
if(startDatum<zielDatum) {
var jahre=0, monate=0, tage=0, stunden=0, minuten=0, sekunden=0;
// Jahre
while(startDatum<zielDatum) {
jahre++;
startDatum.setFullYear(startDatum.getFullYear()+1);
}
startDatum.setFullYear(startDatum.getFullYear()-1);
jahre--;
// Monate
while(startDatum<zielDatum) {
monate++;
startDatum.setMonth(startDatum.getMonth()+1);
}
startDatum.setMonth(startDatum.getMonth()-1);
monate--;
// Tage
while(startDatum.getTime()+(24*60*60*1000)<zielDatum) {
tage++;
startDatum.setTime(startDatum.getTime()+(24*60*60*1000));
}
// Stunden
stunden=Math.floor((zielDatum-startDatum)/(60*60*1000));
startDatum.setTime(startDatum.getTime()+stunden*60*60*1000);
// Minuten
minuten=Math.floor((zielDatum-startDatum)/(60*1000));
startDatum.setTime(startDatum.getTime()+minuten*60*1000);
// Sekunden
sekunden=Math.floor((zielDatum-startDatum)/1000);
// Anzeige formatieren
(jahre!=1)?jahre=jahre+" Jahre, ":jahre=jahre+" Jahr, ";
(monate!=1)?monate=monate+" Monate, ":monate=monate+" Monat, ";
(tage!=1)?tage=tage+" Tage, ":tage=tage+" Tag, ";
(stunden!=1)?stunden=stunden+" Stunden, ":stunden=stunden+" Stunde, ";
(minuten!=1)?minuten=minuten+" Minuten und ":minuten=minuten+" Minute und ";
if(sekunden<10) sekunden="0"+sekunden;
(sekunden!=1)?sekunden=sekunden+" Sekunden":sekunden=sekunden+" Sekunde";
document.countdownform.countdowninput.value=
jahre+monate+tage+stunden+minuten+sekunden;
setTimeout('countdown()',200);
}
// Anderenfalls alles auf Null setzen
else document.countdownform.countdowninput.value=
"0 Jahre, 0 Monate, 0 Tage, 0 Stunden, 0 Minuten und 00 Sekunden";
}
</script>
</head>
<body onload="countdown()">
<form name="countdownform">
<p>
<input size="75" name="countdowninput">
</p>
</form>
</body>
</html>
Damit die Anzeige nicht jede Minute hin und her wackelt, wird bei 9 bis 0 Sekunden eine 0 vorangestellt. Wer's perfekt, aber aufwendiger machen möchte, nimmt mehrere input-Boxen sowie eine Tabelle.
Die Zeitangabe richtet sich überings nach dem internen Chronometer Ihres Rechners. (siehe Taskleiste unten rechts)
Liegt das aktuelle Datum hinter dem Ziel-Datum, werden nur Nullen angezeigt. Die Zählung stoppt automatisch, wenn das angegebene Ziel-Datum überschritten wird.