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

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

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

阿七

2006-04-03 14:41

如何在网页上实现进度条 !;i*\ a
出处 @\ }sb]
\[cH/{nt
进度条的实现可以通过下面的javascript实现： "r@G@pe
<table align="center"><tr><td> 0Su_#".-*
<div style="font-size:8pt;padding:2px;border:solid black 1px"> ~]4kkm7Y
<span id="progress1"> </span> f7Zf}1|
<span id="progress2"> </span> ?!H)zz6y
<span id="progress3"> </span> J2'K?|,m
<span id="progress4"> </span> g&bwtEZ
<span id="progress5"> </span> }hCaNQ&jH
<span id="progress6"> </span> E[UO5X
<span id="progress7"> </span> va^0JfQ
<span id="progress8"> </span> JPsSw
<span id="progress9"> </span> dQai4e>[
</div> }%+qP+O\
</td></tr></table> FRgLlp8x
<script language="javascript"> & N;pH
var progressEnd = 9; // set to number of progress <span>'s. kQ~ %=pn
var progressColor = 'blue'; // set to progress bar color dnwdFsf
var progressInterval = 1000; // set to time between updates (milli-seconds) %@P``
#X5hSw;
var progressAt = progressEnd; <raG07{!*
var progressTimer; <5I1DF[
function progress_clear() { tOM(U-7Z&
for (var i = 1; i <= progressEnd; i++) document.getElementById('progress'+i).style.backgroundColor = 'transparent'; yb?{LL-uy
progressAt = 0; # kEOKmO
} 88g47>{X
function progress_update() { \TUE<<?1s
progressAt++; w" JGO
if (progressAt > progressEnd) progress_clear(); {5-zyE
else document.getElementById('progress'+progressAt).style.backgroundColor = progressColor; w;+ br
progressTimer = setTimeout('progress_update()',progressInterval); x'qWM/
} g4wZvra6%)
function progress_stop() { q^*6C[G B
clearTimeout(progressTimer); x@m<Ym-
progress_clear(); KDD@%E
} ue6d~8&
progress_update(); // start progress bar ] H&c'
</script> "OL~ul5
实现的原理就是通过修改spanid的backgroundColor 值和setTimeout('progress_update()',progressInterval); /C$ xH@bb
定时器函数来实现的。