阿七
级别: 未验证会员
精华:
0
发帖: 909
威望: 0 点
金钱: 2161 RMB
贡献值: 0 点
在线时间:512(小时)
注册时间:2006-03-29
最后登录:2008-08-07
|
如何在网页上实现进度条
如何在网页上实现进度条 R,A|"Q
出处 !+IxPn
5/mW:G,&
进度条的实现可以通过下面的javascript实现： DRi!WWivn
<table align="center"><tr><td> %|Vo Zx ^
<div style="font-size:8pt;padding:2px;border:solid black 1px"> 1,W%t \D
<span id="progress1"> </span> x#| P-^
<span id="progress2"> </span> "G|
Gyc
<span id="progress3"> </span> lw? f2_fi
<span id="progress4"> </span> ~@z5Ld3xz
<span id="progress5"> </span> )G
,LG0"-
<span id="progress6"> </span> `R8~H7{I6
<span id="progress7"> </span> 9XS+W
w7
<span id="progress8"> </span> m
|,ocz
<span id="progress9"> </span> .gT@_.ZD9
</div> R]/F{Xs
</td></tr></table> b_Ba0 h=
<script language="javascript"> G`mC=*M a;
var progressEnd = 9; // set to number of progress <span>'s. ~srmlBi6
var progressColor = 'blue'; // set to progress bar color WLNkO^zb
var progressInterval = 1000; // set to time between updates (milli-seconds) <g,k[
9A 3Q&@,
var progressAt = progressEnd; X~ G"TT$)
var progressTimer; tq@<8?
function progress_clear() { pq-zy6^
for (var i = 1; i <= progressEnd; i++) document.getElementById('progress'+i).style.backgroundColor = 'transparent'; \s<iM2]Kl
progressAt = 0; N ~M:+ \
} -mX
_I{BJ
function progress_update() { f*5=, $0
progressAt++; ]pb;q(?^
if (progressAt > progressEnd) progress_clear();
_BtlO(0&
else document.getElementById('progress'+progressAt).style.backgroundColor = progressColor; S~/iH Xm
progressTimer = setTimeout('progress_update()',progressInterval); )zUV6U7v
} kH z3_B9 [
function progress_stop() { [ (ty{
clearTimeout(progressTimer); A7|"0*62
progress_clear(); Y60ld7H
} j* QY_Ny*
progress_update(); // start progress bar lrq !}\aX
</script> &g)
`
实现的原理就是通过修改spanid的backgroundColor 值和setTimeout('progress_update()',progressInterval); :?RK>}4|F
定时器函数来实现的。
|
|
|
|
[楼 主]
|
Posted: 2006-04-03 14:41 |
| |
常州五颜六色网络技术有限公司 -> 网站建设 -> 如何在网页上实现进度条
