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

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

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

阿七

2006-04-03 14:41

如何在网页上实现进度条 Y kcN-
出处 0uf)6(f
_9"%;:t
进度条的实现可以通过下面的javascript实现： bJ9K!6s??`
<table align="center"><tr><td> *W=R:Bl!
<div style="font-size:8pt;padding:2px;border:solid black 1px"> hdx"/.s
<span id="progress1"> </span> {~eVZVv
<span id="progress2"> </span> L2^M#G@t
<span id="progress3"> </span> >^ M=/+<c
<span id="progress4"> </span> Fs;_z9ej-u
<span id="progress5"> </span> L:RMZp*bK
<span id="progress6"> </span> ^`oyf{w@
<span id="progress7"> </span> |fg{Fpc
<span id="progress8"> </span> Kv-4VWh
<span id="progress9"> </span> 2 1] 8 7$
</div> UqsX@jL!
</td></tr></table> 8iwqy0<
<script language="javascript"> NU$?BiB?R
var progressEnd = 9; // set to number of progress <span>'s. SFx|9$hXm
var progressColor = 'blue'; // set to progress bar color C.oC@P
var progressInterval = 1000; // set to time between updates (milli-seconds) w-9fskd6e
0'4V*Y
var progressAt = progressEnd; <hSrx7o
var progressTimer; =dTsGNz
function progress_clear() { mu}T,+9\
for (var i = 1; i <= progressEnd; i++) document.getElementById('progress'+i).style.backgroundColor = 'transparent'; \w\{x0u
progressAt = 0; F~tT5?+
} |]8Hh>
function progress_update() { i?1g{JW
progressAt++; rkz_h
if (progressAt > progressEnd) progress_clear(); S8$kxQg
else document.getElementById('progress'+progressAt).style.backgroundColor = progressColor; W_ hckq.
progressTimer = setTimeout('progress_update()',progressInterval); N++ jI(
} ^%pM$3ov
function progress_stop() { W4~:3Sk
clearTimeout(progressTimer); iI(7{$y
progress_clear(); dJ}E,rW}
} B1!b@0^
progress_update(); // start progress bar }^np
</script> o|?bvFC
实现的原理就是通过修改spanid的backgroundColor 值和setTimeout('progress_update()',progressInterval); sHSD`mYq
定时器函数来实现的。