| 12.08.2010, 18:17 | #1 |
|
Moderator
Registriert seit: 11.09.2007
Ort: Schweiz
Beiträge: 592
|
[HTML/JS/CSS] Eine kleine Progressbar ^^
Die beiden Bilder:
(Hab hier einfach mal ein paar eingefügt, die sind jeweils 1 px breit ) Der Code: HTML-Code:
<html> <head> <title>Test</title> <script type="text/javascript"> var percent=0; var interval; function Down() { document.getElementById("green").style.width=percent+'%'; document.getElementById("text").innerHTML=percent+'%'; percent++; if (percent > 100) { window.clearInterval(interval); delete(percent); delete(interval); document.getElementById("green").style.width="100%"; document.getElementById("text").innerHTML="Done!"; } } function start() { interval = window.setInterval ('Down()', 100); Down(); } </script> </head> <body onload="start();"> <div style="width:200px; background: url(progress_bar_null.gif) repeat-x;"> <div style="width:0%; background: url(progress_bar.gif) repeat-x;" id="green"> </div> <div style="text-align:center;" id="text">0%</div> </div> </body> </html> MfG Z4ppy PS.: body onload is natürlich auch nich die sauberste Lösung, ich weiss, das sollte eig. über window gehen ^^
__________________
Geändert von Z4ppy (12.08.2010 um 18:19 Uhr) |
| Themen-Optionen | |
|
|