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

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

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

阿七

2006-04-03 14:41

如何在网页上实现进度条 >djTJ>dl_u
出处 ! fSM6Vo
r%^J3
进度条的实现可以通过下面的javascript实现： "f-z3kL
<table align="center"><tr><td> p.J+~s4G
<div style="font-size:8pt;padding:2px;border:solid black 1px"> T%p/(
<span id="progress1"> </span> FsyM{LT
<span id="progress2"> </span> ^J_rb;m43
<span id="progress3"> </span> S|HnmkV66
<span id="progress4"> </span> -yH8bm'0"
<span id="progress5"> </span> I:9jn"
<span id="progress6"> </span> Z UCz-53
<span id="progress7"> </span> 69>N xr~k
<span id="progress8"> </span> 8wQ|Ep\
<span id="progress9"> </span> 3Az7urIY
</div> _Bhm\|t
</td></tr></table> {f kP|d
<script language="javascript"> ;[>g(W+
var progressEnd = 9; // set to number of progress <span>'s. DRUvQf
var progressColor = 'blue'; // set to progress bar color GDUOUl&
var progressInterval = 1000; // set to time between updates (milli-seconds) \L@DDK|"`6
/y<nAGtD&
var progressAt = progressEnd; WFBVAD
var progressTimer; %Z#s9QC
function progress_clear() { $<N!2[I L
for (var i = 1; i <= progressEnd; i++) document.getElementById('progress'+i).style.backgroundColor = 'transparent'; Z<,$XvL
progressAt = 0; [V-OYjPAx
} LAT%k2%Wx
function progress_update() { 8w|-7$ v
progressAt++; }&h*bim
if (progressAt > progressEnd) progress_clear(); ?UPZ49y
else document.getElementById('progress'+progressAt).style.backgroundColor = progressColor; uK5&HdoM
progressTimer = setTimeout('progress_update()',progressInterval); Mx<?c
} fEB>3hI
function progress_stop() { wC~ra:/?:7
clearTimeout(progressTimer); q0l=S+0
progress_clear(); z:_o3W.E
} #r ;;d(
progress_update(); // start progress bar GvCB3z
</script> 1sT%g}w@|
实现的原理就是通过修改spanid的backgroundColor 值和setTimeout('progress_update()',progressInterval); fZ*LxL
定时器函数来实现的。