阿七
级别: 未验证会员
精华:
0
发帖: 909
威望: 0 点
金钱: 2161 RMB
贡献值: 0 点
在线时间:512(小时)
注册时间:2006-03-29
最后登录:2008-08-07
|
如何在网页上实现进度条
如何在网页上实现进度条 g.$a]pZz
出处 >qkZn7C
n?'I&0>M
进度条的实现可以通过下面的javascript实现： },<(VhP
<table align="center"><tr><td> (U bz@s^
<div style="font-size:8pt;padding:2px;border:solid black 1px"> X}x"+ #\<@
<span id="progress1"> </span> ehe hTP
<span id="progress2"> </span> 03Czx `
<span id="progress3"> </span> 9n\:grW
<span id="progress4"> </span> ;pn*|Bsq
<span id="progress5"> </span>
KU:RS+,e;
<span id="progress6"> </span> Uj]Tdg
<span id="progress7"> </span> ;nS.t_UW.
<span id="progress8"> </span> tgk] sQY
<span id="progress9"> </span> nX
4WlH
</div> NPc@;g]d"
</td></tr></table> #yPQt!
<script language="javascript"> r2dU>U*:4
var progressEnd = 9; // set to number of progress <span>'s. \M$e#^g
var progressColor = 'blue'; // set to progress bar color I'W`XN
var progressInterval = 1000; // set to time between updates (milli-seconds) B<^yT@Wc
C1/qiSHsh
var progressAt = progressEnd; jd>ug=~x
var progressTimer; 7I\qE r57
function progress_clear() { NA@
<v{z
for (var i = 1; i <= progressEnd; i++) document.getElementById('progress'+i).style.backgroundColor = 'transparent'; | R\PQ/)
progressAt = 0; R9 +0ZoS
} K14FY2"
function progress_update() { [2~^~ K
progressAt++; (3. B\8s
if (progressAt > progressEnd) progress_clear(); ,$4f#)
else document.getElementById('progress'+progressAt).style.backgroundColor = progressColor; >oD,wSYV~
progressTimer = setTimeout('progress_update()',progressInterval); Vv|% ;5(
}
ORCG(N
function progress_stop() { 4fR}+[~2
clearTimeout(progressTimer); #3 ~ #`&
progress_clear(); VWLqJd>tr1
} K$1(HbL
progress_update(); // start progress bar
'}$]V>/
</script> }F
B]LLi
实现的原理就是通过修改spanid的backgroundColor 值和setTimeout('progress_update()',progressInterval); ;xXD2{q
定时器函数来实现的。
|
|
|
|
[楼 主]
|
Posted: 2006-04-03 14:41 |
| |
常州五颜六色网络技术有限公司 -> 网站建设 -> 如何在网页上实现进度条
