如何在网页上实现进度条网站建设常州五颜六色网络技术有限公司

常州五颜六色网络技术有限公司 -> 网站建设 -> 如何在网页上实现进度条

登录 -> 注册 -> 回复主题 -> 发表主题

阿七

2006-04-03 14:41

如何在网页上实现进度条 !cp ,OrO\
出处 GaM#a[p
H4^-MSw
进度条的实现可以通过下面的javascript实现： EV2whs2g
<table align="center"><tr><td> EvQN(_
<div style="font-size:8pt;padding:2px;border:solid black 1px"> ~i6tc d
<span id="progress1"> </span> @ZD1HA,h"
<span id="progress2"> </span> MCL5a@BX)
<span id="progress3"> </span> f:Ju20D
<span id="progress4"> </span> :m^eNS6:
<span id="progress5"> </span> RK"dPr
<span id="progress6"> </span> FeLWQn/aV6
<span id="progress7"> </span> $>8+t>|
<span id="progress8"> </span> L;E9"7Jo
<span id="progress9"> </span> Hz%#&E
</div> xREqcH,vU
</td></tr></table> { S4?L8
<script language="javascript"> )bw^!w)
var progressEnd = 9; // set to number of progress <span>'s. IWuR=I$t
var progressColor = 'blue'; // set to progress bar color EJb"/oLla
var progressInterval = 1000; // set to time between updates (milli-seconds) ~*THL0]~
;:8_H0X'K
var progressAt = progressEnd; 6hAeLlU1
var progressTimer; %L<VnY#%u
function progress_clear() { `3/,-
for (var i = 1; i <= progressEnd; i++) document.getElementById('progress'+i).style.backgroundColor = 'transparent'; P0k|33;7L
progressAt = 0; .nKyB'uV
} WTSY:kvcCY
function progress_update() { M2 %<4(UwI
progressAt++; R%8nR6iG"
if (progressAt > progressEnd) progress_clear(); \SA5@ .W
else document.getElementById('progress'+progressAt).style.backgroundColor = progressColor; DZRkK3
progressTimer = setTimeout('progress_update()',progressInterval); Xv9kJ
} k "'q
function progress_stop() { MU-ie *+
clearTimeout(progressTimer); -`&4>\o2Lx
progress_clear(); 1sGkbfh{t
} ?dC[VYC\^
progress_update(); // start progress bar Q?I)1][ !"
</script> ]J5[ZVz
实现的原理就是通过修改spanid的backgroundColor 值和setTimeout('progress_update()',progressInterval); D>VI{p
定时器函数来实现的。