阿七
级别: 未验证会员
精华:
0
发帖: 909
威望: 0 点
金钱: 2161 RMB
贡献值: 0 点
在线时间:512(小时)
注册时间:2006-03-29
最后登录:2008-08-07
|
如何在网页上实现进度条
如何在网页上实现进度条 (VF4FC
出处 41+E U Mc
<EM LiiNY
进度条的实现可以通过下面的javascript实现： j8ohzX[
Y
<table align="center"><tr><td> q[,R%6&'
<div style="font-size:8pt;padding:2px;border:solid black 1px"> xa% ktn
<span id="progress1"> </span> j}
x
O34
<span id="progress2"> </span> xZ{|D
<span id="progress3"> </span> ~%!U,)-
<span id="progress4"> </span> f'?6D+Yw~
<span id="progress5"> </span> yZP
Fo
<span id="progress6"> </span> _-yF9g"I
<span id="progress7"> </span> %n`iA7j$W
<span id="progress8"> </span> 1wNY} 3
<span id="progress9"> </span> uD* s^
</div> d_?Zr`:
</td></tr></table> ,+5VeRyrV
<script language="javascript"> =g>7|?6>=
var progressEnd = 9; // set to number of progress <span>'s. JV6U0$g_S
var progressColor = 'blue'; // set to progress bar color zZjLt1
var progressInterval = 1000; // set to time between updates (milli-seconds) Z=5}17kA
u
P'w.nA&2
var progressAt = progressEnd; %K f . F
var progressTimer; JU,RO oz(
function progress_clear() { &DhA$o "'
for (var i = 1; i <= progressEnd; i++) document.getElementById('progress'+i).style.backgroundColor = 'transparent'; ]TZWF L-
progressAt = 0; GbrPtu2{@V
}
{{)[Ap)
function progress_update() { 1?#p !;&
progressAt++; M,! n o
if (progressAt > progressEnd) progress_clear(); "Ohpb!J9
else document.getElementById('progress'+progressAt).style.backgroundColor = progressColor; Y>!W&G
tu
progressTimer = setTimeout('progress_update()',progressInterval); >]08".ajS
} U:p
"IY#%
function progress_stop() { 6)2M/(
clearTimeout(progressTimer);
U.sP Ft
progress_clear(); }Z$G=;3#
} F3|pS :
progress_update(); // start progress bar |[7 $) $
</script> Zg f||,
实现的原理就是通过修改spanid的backgroundColor 值和setTimeout('progress_update()',progressInterval); ymVd9 4L
定时器函数来实现的。
|
|
|
|
[楼 主]
|
Posted: 2006-04-03 14:41 |
| |
常州五颜六色网络技术有限公司 -> 网站建设 -> 如何在网页上实现进度条
