Fussball WM Spezial: Countdown zur WM 2010

Wollen wir uns auch ein wenig auf den Fussballfieber einlassen.
In  einem Jahr  wird die WM in Südafrika ausgetragen, wie lange es noch bis
dahin dauert, sagt ihnen dieses kleine JavaScript.

Wie Sie bestimmt Wissen, findet die Fussball WM 2010 in Südafrika
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, 2010");

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 2010 Organisationsteams, soll das
Eröffnungsspiel am 9 Juni 2010 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)

This entry was posted in Javascript Tricks. Bookmark the permalink.

Leave a Reply

Your email address will not be published. Required fields are marked *