Erweiterung des Countdowns

[Michael]

Hallo zusammen

Auf meiner HP möchte ich gerne einen Countdown einbauen. Das untenstehende Script habe ich bis jetzt zusammen. Doch nun stellt es bei mir an. Ich möchte gerne den Countdown erweitern und noch Stunden und Minuten eingeben (nicht nur Datum). Doch wie mache ich das?

<script language="JavaScript1.2">

function setcountdown(theyear,themonth,theday)
{
yr=theyear;mo=themonth;da=theday
}

setcountdown(2003,03,23)
var occasion="zum Suisse-Cup-Turnier in Abtwil"
var message_on_occasion="Das Suisse-Cup-Turnier in Abtwil läuft. Ergebnisse sind bald online..."

var countdownwidth='518px'
var countdownheight='20px'
var countdownbgcolor='white'
var opentags='<font face="arial" size="-1" color="#333366"><b>'
var closetags='</b></font>'

var montharray=new Array("Jan","Feb","Mar","Apr","May","Jun","Jul","Aug","Sep","Oct","Nov","Dec")

function start_countdown(){
if (document.layers)
document.countdownnsmain.visibility="show"
countdown(2000,1,1)
}

if (document.all)
document.write('<span id="countdownie" style="width:'+countdownwidth+'; background-color:'+countdownbgcolor+'"></span>')

window.onload=start_countdown

function countdown(){
var today=new Date()
var todayy=today.getYear()
if (todayy < 1000)
todayy+=1900
var todaym=today.getMonth()
var todayd=today.getDate()
var todayh=today.getHours()
var todaymin=today.getMinutes()
var todaysec=today.getSeconds()
var todaystring=montharray[todaym]+" "+todayd+", "+todayy+" "+todayh+":"+todaymin+":"+todaysec
futurestring=montharray[mo-1]+" "+da+", "+yr
dd=Date.parse(futurestring)-Date.parse(todaystring)
dday=Math.floor(dd/(60*60*1000*24)*1)
dhour=Math.floor((dd%(60*60*1000*24))/(60*60*1000)*1)
dmin=Math.floor(((dd%(60*60*1000*24))%(60*60*1000))/(60*1000)*1)
dsec=Math.floor((((dd%(60*60*1000*24))%(60*60*1000))%(60*1000))/1000*1)
if(dday<=0&&dhour<=0&&dmin<=0&&dsec<=1){
if (document.layers){
document.countdownnsmain.document.countdownnssub.document.write(opentags+message_on_occasion+closetags)
document.countdownnsmain.document.countdownnssub.document.close()
}
else if (document.all)
countdownie.innerHTML=opentags+message_on_occasion+closetags
return
}
else{
if (document.layers){
document.countdownnsmain.document.countdownnssub.document.write(opentags+dday+ " Tage, "+dhour+" Stunden, "+dmin+" Minuten und "+dsec+" Sekunden, bis "+occasion+closetags)
document.countdownnsmain.document.countdownnssub.document.close()
}
else if (document.all)
countdownie.innerHTML=opentags+"Noch " + dday + " Tage, "+dhour+" Stunden, "+dmin+" Minuten und "+dsec+" Sekunden, bis "+occasion+closetags
}
setTimeout("countdown()",1000)
}
</script>

Vielen Dank
Michael Rothen

[molily]

Hallo, Michael,

Auf meiner HP möchte ich gerne einen Countdown einbauen. Das untenstehende Script habe ich bis jetzt zusammen. Doch nun stellt es bei mir an. Ich möchte gerne den Countdown erweitern und noch Stunden und Minuten eingeben (nicht nur Datum). Doch wie mache ich das?

Es wird nicht gerne gesehen, wenn jemand einen Haufen Code ablädt und die anderen ForumsteilnehmerInnen bittet, ein Feature einzubauen...

<script language="JavaScript1.2">

type="text/javascript"

function setcountdown(theyear,themonth,theday) {
yr=theyear;mo=themonth;da=theday
}

Sofern du diese Funktion weiter verwenden willst, gebe ihr zwei Parameter mehr, welche dann als Werte für Stunden und Minuten festgelegt werden.

if (document.layers) [...]
if (document.all) [...]

Bitte mache dich zusätzlich mit dem DOM (http://selfhtml.teamone.de/dhtml/modelle/dom.htm) vertraut. Du benutzt zwei veraltete proprietäre DHTML-Modelle, wodurch du keine große Kompatibilität erreichst, da neue Browser nur noch das DOM verstehen (Opera, Konqueror, Netscape/Mozilla) beziehungsweise verstehen werden).

countdown(2000,1,1)

Die Parameter sind scheinbar überflüssig.

var today=new Date()
var todayy=today.getYear()
if (todayy < 1000)
todayy+=1900
var todaym=today.getMonth()
var todayd=today.getDate()
var todayh=today.getHours()
var todaymin=today.getMinutes()
var todaysec=today.getSeconds()
var todaystring=montharray[todaym]+" "+todayd+", "+todayy+" "+todayh+":"+todaymin+":"+todaysec

[...]

dd=Date.parse(futurestring)-Date.parse(todaystring)

Der Code läst sich meines Wissens auf folgendes kürzen:

var today=new Date();
dd=Dat.parse(futurestring)-today.getTime();

Siehe http://selfhtml.teamone.de/javascript/objekte/date.htm#get_time. Ich wüsste nicht, wieso man einzeln alle Objekteigenschaften abfragt, mit ihnen einen String zusammensetzt, um diesen dann mit parse() in einen Unix-Timestring umzuwandeln - das geht mit getTime() direkt.

futurestring=montharray[mo-1]+" "+da+", "+yr

[...]

Date.parse(futurestring)

Hier könntest du dein Feature einbauen - parse() http://selfhtml.teamone.de/javascript/objekte/date.htm#parse erlaubt durchaus, dass der Parameter vollständig ist, das heißt auch Stunden, Minuten und Sekunden enthält. Folglich hängst du an den String - übrigens genauso, wie du es oben bei todaystring gemacht hast, ohne dass es nötig war - schlichtweg noch die Stundenzahl und die Minutenanzahl an, sodass ein parsbares Format (siehe Link) entsteht.

Übrigens könntest du hier auch die einzelnen Datumsteile mit den set-Funktionen festlegen, anstatt einen String zu erstellen und ihn dann zu parsen. Dies käme jedoch unter größerem Aufwand auf dasselbe heraus.

dday=Math.floor(dd/(60*60*1000*24)*1)
dhour=Math.floor((dd%(60*60*1000*24))/(60*60*1000)*1)
dmin=Math.floor(((dd%(60*60*1000*24))%(60*60*1000))/(60*1000)*1)
dsec=Math.floor((((dd%(60*60*1000*24))%(60*60*1000))%(60*1000))/1000*1)

Das sieht nach Overkill aus, denn mit jeder Anweisung wiederholst du längst ausgeführte Rechenoperationen unnötig - zum einen die Sekundenanzahl von Taen, Stunden und Minuten (60*60*1000*24 usw.) und zum anderen das Berechnen der Restwerte mittels des Modulo-Divisionsoperators. Diese Werte könntest du jeweils Zwischenspeichern.

setTimeout("countdown()",1000)

Du musst dir im klaren darüber sein, dass die Funktion jede Sekunde einmal ausgeführt wird, deshalb solltest du sie so weit wie möglich rationalisieren, da die Operationen mitunter vergleichsweise viel Zeit benötigen, sodass der Browser völlig unnötig belastet wird.

Grüße,
Mathias