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

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

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

阿七

2006-04-03 14:41

如何在网页上实现进度条 bb{+
出处 ~"k'T9QBY
` ;;!>rm
进度条的实现可以通过下面的javascript实现： {\B!Rjt[T
<table align="center"><tr><td> #^Y,,GA
<div style="font-size:8pt;padding:2px;border:solid black 1px"> }MNm>3
<span id="progress1"> </span> =R05H2hs
<span id="progress2"> </span> s>5 Z
<span id="progress3"> </span> ]l%j>Vb!L
<span id="progress4"> </span> < -Nj
<span id="progress5"> </span> 8/:\iPk0
<span id="progress6"> </span> p.G7Cs
<span id="progress7"> </span> G Ot@x9 %
<span id="progress8"> </span> :|a[6Uwl\V
<span id="progress9"> </span> )l=j,4nn
</div> g=)@yZ3>v
</td></tr></table> DCj!m<Y&
<script language="javascript"> <x/&Ml+
var progressEnd = 9; // set to number of progress <span>'s. @:63OLlrG
var progressColor = 'blue'; // set to progress bar color 8PQt8G.
var progressInterval = 1000; // set to time between updates (milli-seconds) <XNLeJdY
0PN{ +<?.
var progressAt = progressEnd; jzQgDed ]
var progressTimer; !Ej<J&e
function progress_clear() { {?8rvAjY
for (var i = 1; i <= progressEnd; i++) document.getElementById('progress'+i).style.backgroundColor = 'transparent'; s[hD9$VB>
progressAt = 0; {S?.bT%&
} DD1S]m
function progress_update() { M- n +3E9
progressAt++; /O9z-!Jz
if (progressAt > progressEnd) progress_clear(); C-8@elZ1
else document.getElementById('progress'+progressAt).style.backgroundColor = progressColor; !>M: G:K
progressTimer = setTimeout('progress_update()',progressInterval); v"`w'+
} dQ<EDtap
function progress_stop() { ;yr'K
clearTimeout(progressTimer); |q?A8@\u
progress_clear(); (UCWSA7oc
} ~!I \{(
progress_update(); // start progress bar B{44|aq1|
</script> um/iK}O
实现的原理就是通过修改spanid的backgroundColor 值和setTimeout('progress_update()',progressInterval); \QVL%,.%M
定时器函数来实现的。