Fussball WM Spezial: Countdown zur WM 2006
Stand vom 11.06.2002
Die Fussball WM 2002 in Japan und Südkorea hat begonnen.
Wollen wir uns auch ein wenig auf den Fussballfieber einlassen.
In vier Jahren wird die WM in Deutschland ausgetragen, wie lange es noch bis
dahin dauert, sagt ihnen dieses kleine JavaScript.
Wie Sie bestimmt Wissen, findet die Fussball WM 2006 in Deutschland
statt. Warum also nicht die Jahre, Tage und Stunden,... bis dahin
zählen? Mit einem kleinen JavaScript kann man dies ohne Probleme
machen.
Das folgende Skript muss in den <head> Teil der jeweiligen
Seite.
<SCRIPT type="text/javascript">
var eventdate = new Date ("June 9, 2006");
function toSt(n) {
s = ""
if (n < 10) s += "0"
return s + n.toString();
}
function countdown() {
cl = document.clock;
d = new Date();
count = Math.floor((eventdate.getTime() - d.getTime()) / 1000);
if (count <= 0) {
cl.days.value = "----";
cl.hours.value = "--";
cl.mins.value = "--";
cl.secs.value = "--";
return;
}
cl.secs.value = toSt(count % 60);
count = Math.floor(count / 60);
cl.mins.value = toSt(count % 60);
count = Math.floor(count / 60);
cl.hours.value = toSt(count % 24);
count = Math.floor(count / 24);
cl.days.value = count;
setTimeout ("countdown()", 1000);
}
</SCRIPT>
In den <body> Tag muss der Event gestartet werden:
<body onload=countdown()>
Und nun muss das ganze noch in die Seite eingebunden werden. Dies geschieht über Formularfelder.
<FORM name=clock>
<TABLE border=3>
<TBODY>
<TR>
<TD>
<CENTER>Tage: </CENTER></TD>
<TD>
<CENTER>Stunden: </CENTER></TD>
<TD>
<CENTER>Minuten: </CENTER></TD>
<TD>
<CENTER>Sekunden: </CENTER></TD>
<TR>
<TD>
<CENTER><INPUT size=3 name=days> </CENTER></TD>
<TD>
<CENTER><INPUT size=2 name=hours> </CENTER></TD>
<TD>
<CENTER><INPUT size=2 name=mins> </CENTER></TD>
<TD>
<CENTER><INPUT size=2 name=secs>
</CENTER></TD></TR></TBODY></TABLE></FORM>
Die Funktionsweise des Skriptes ist eigentlich recht einfach. Über
die Variable eventdate wird das Datum des Ereignisses
angegeben. Nach Angaben des WM 2006 Organisationsteams, soll das
Eröffnungsspiel am 9 Juni 2006 stattfinden.
Das Datum muss in dem verwendeten Format angegeben werden,
da sonst das Script die Zeit nicht ermitteln kann.
Der Aufruf der Funktion erfolgt beim Laden der Seite. Die Funktion
selbst wird jede Sekunde erneut aufgerufen, da sich der Countdown
ja jede Sekunde ändert. Ausgegeben wird das ganze durch das
Formular. Wichtig ist, das Sie die name-Parameter angaben nicht
verändern, da sonst das Script nicht die Elemente findet, in
denen die Uhrzeit
ausgegeben werden soll. Das ganze Skript kann natürlich auf
jedes andere Datum auch angewendet werden. (tf)

HTML