Javascript Countdown mit Progressbar
Aufgrund meiner derzeitigen Arbeit an einem eigenen Browsergame habe ich einen Javascript Countdown gebraucht, welcher gleichzeitig eine Progressbar laufen lässt die den Fortschritt anzeigen lässt.
Als ich das Internet nach einer geeigneten Lösung zu meinem Problem gesucht habe, bin ich auf einen Javascript-Generator gestoßen. Diesen habe ich kurzerhand erweitert und auf meine Bedürfnisse angepasst.
Damit mein Code funktioniert muss Scriptaculous und Prototype eingebaut werden, da ich den Effekt Morph nutze. Wer was anderes nutzen will muss einfach editieren.
Hier der Javascript-Code:
countdown() { now = new Date(); count = Math.floor(end.getTime() - now.getTime()); progressBar(count); if(count > 0) { miliseconds = toSt3(count%1000); count = Math.floor(count/1000); seconds = toSt2(count%60); count = Math.floor(count/60); minutes = toSt2(count%60); count = Math.floor(count/60); hours = toSt2(count%24); days = count; document.getElementById('countdown').innerHTML = hours + ':' + minutes + ':' + seconds setTimeout('countdown()', 100); } else { document.getElementById('countdown').innerHTML = 'Fertig!'; window.location.reload(); } } function progressBar(rest) { maxwidth = 200; percentage = (holeDiff-rest) / holeDiff; width = percentage * maxwidth; // Wenn nur die Prozent angezeigt werden sollen //document.getElementById('progressBar').innerHTML = $percentage + '%'; new Effect.Morph('progressBar', {style:'width:' + width + 'px', duration:'0'}); } countdown();
Um das ganze zum Laufen zu bringen braucht man noch etwas html und css und fertig wären wir schon.
#barContainer { height: 12px; width: 200px; border: 1px solid #000; margin-left: 5px; background-color: #DDDDDD; } #barContainer { height: 12px; width: 200px; border: 1px solid #000; margin-left: 5px; background-color: #DDDDDD; }
Und diese Zeilen werden ersetzt:
<span id="countdown">Kein Javascript aktiviert</span> <div id="barContainer"> <div id="progressBar"></div> </div>
Ich hoffe das hilft noch jemandem außer mir.
Viel Spaß damit
Meine Empfehlung: Günstiger Webspace und verdammt preiswerte vServer von Netcup Hosting
