阿七
级别: 未验证会员
精华:
0
发帖: 909
威望: 0 点
金钱: 2161 RMB
贡献值: 0 点
在线时间:512(小时)
注册时间:2006-03-29
最后登录:2008-08-07
|
如何在网页上实现进度条
如何在网页上实现进度条 <Gi%+I@szl 出处 s*ZE`/SM3 ('tXv"fT 进度条的实现可以通过下面的javascript实现: |QDoi[
* <table align="center"><tr><td> (-21h0N[V <div style="font-size:8pt;padding:2px;border:solid black 1px"> 9%"7~YCDas <span id="progress1"> </span> WVdV:vJ- <span id="progress2"> </span> *M1GVhW(+ <span id="progress3"> </span> BDB*>y7( <span id="progress4"> </span> d:@+dS <span id="progress5"> </span> >R+-mP!nj <span id="progress6"> </span> ABN4kM>% <span id="progress7"> </span> \Ii{s
n9 <span id="progress8"> </span> 9D T< <span id="progress9"> </span> jE\G_> </div> wJy]Vyd </td></tr></table> IZ=Z=k{ <script language="javascript"> S&_0
3 var progressEnd = 9; // set to number of progress <span>'s. rH
3U;K! var progressColor = 'blue'; // set to progress bar color ?veeW6E( var progressInterval = 1000; // set to time between updates (milli-seconds) oY)eN?c
uUI#^ A var progressAt = progressEnd; @dWA1tM
var progressTimer; :_8K8Sa function progress_clear() { iWs6 !s! for (var i = 1; i <= progressEnd; i++) document.getElementById('progress'+i).style.backgroundColor = 'transparent'; O[ma% E*0 progressAt = 0; kE&R;T`Gb% } uY]';OtG function progress_update() { 4uXGpsL progressAt++; >w3C
Ku< if (progressAt > progressEnd) progress_clear(); C-YYG else document.getElementById('progress'+progressAt).style.backgroundColor = progressColor; s41%A2Enh progressTimer = setTimeout('progress_update()',progressInterval); o?baiOkH } :3D8rqi: function progress_stop() { imM!Me 0TE clearTimeout(progressTimer); .I`>F/Sjr progress_clear(); K*@?BE } $u<;X^ progress_update(); // start progress bar )I%M]K]F </script>
0~nX7 实现的原理就是通过修改spanid的backgroundColor 值和setTimeout('progress_update()',progressInterval); x6/u+Urn 定时器函数来实现的。
|
|
[楼 主]
|
Posted: 2006-04-03 14:41 |
| |