阿七
级别: 未验证会员
精华:
0
发帖: 909
威望: 0 点
金钱: 2161 RMB
贡献值: 0 点
在线时间:512(小时)
注册时间:2006-03-29
最后登录:2008-08-07
|
如何在网页上实现进度条
如何在网页上实现进度条 hqD
qt"dKz
出处 cP rwW 6
?lKhzH.T
进度条的实现可以通过下面的javascript实现： -c+]Wm"\
<table align="center"><tr><td> dYF=c
<div style="font-size:8pt;padding:2px;border:solid black 1px"> |8U;m:AS
<span id="progress1"> </span> HI
D([Wk
<span id="progress2"> </span> >2lwW XA
<span id="progress3"> </span> Fr [7
<span id="progress4"> </span> tJU-<{8
<span id="progress5"> </span> e fO jTA%
<span id="progress6"> </span> <]U1\~j
<span id="progress7"> </span> 8ObeiVXf)
<span id="progress8"> </span> ^sClz*%?
<span id="progress9"> </span> 27#5y_
`
</div> 7x k|+!
</td></tr></table> 1@q
gF
<script language="javascript"> lr3
mE
var progressEnd = 9; // set to number of progress <span>'s. H j6'pJ4
var progressColor = 'blue'; // set to progress bar color Vw~\H Gs/~
var progressInterval = 1000; // set to time between updates (milli-seconds) i$uN4tVKT
]Kh2;>=
Xj
var progressAt = progressEnd; Yj3I5RG
var progressTimer;
QG3&p<
function progress_clear() { Im?LIgt$
for (var i = 1; i <= progressEnd; i++) document.getElementById('progress'+i).style.backgroundColor = 'transparent'; g0R[xOS|
progressAt = 0; [ hh/1[
} B\CN<<N>dD
function progress_update() { zP) ~a
progressAt++; C9~~O~7x
if (progressAt > progressEnd) progress_clear(); 4N>>+]MWc
else document.getElementById('progress'+progressAt).style.backgroundColor = progressColor; [V}, tO|
progressTimer = setTimeout('progress_update()',progressInterval); @g-Tk
} k%81f'H
function progress_stop() { tWP O]3hW
clearTimeout(progressTimer); osP\D iQ
progress_clear(); k$i'v:c|:i
} ~r*P]*51x
progress_update(); // start progress bar n"D ?I
</script> Ip
*g'
实现的原理就是通过修改spanid的backgroundColor 值和setTimeout('progress_update()',progressInterval); 3 HC
定时器函数来实现的。
|
|
|
|
[楼 主]
|
Posted: 2006-04-03 14:41 |
| |
常州五颜六色网络技术有限公司 -> 网站建设 -> 如何在网页上实现进度条
