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)

Bookmark setzen... These icons link to social bookmarking sites where readers can share and discover new web pages.
  • Print
  • Digg
  • Sphinn
  • del.icio.us
  • Facebook
  • Mixx
  • Bloglines
  • MisterWong
  • MySpace
  • Reddit
  • SEOigg
  • Technorati
  • TwitThis
  • Y!GG
  • Google Bookmarks

Weiterführende Links: