阿七
级别: 未验证会员
精华:
0
发帖: 909
威望: 0 点
金钱: 2161 RMB
贡献值: 0 点
在线时间:512(小时)
注册时间:2006-03-29
最后登录:2008-08-07
|
如何在网页上实现进度条
如何在网页上实现进度条 ww$Ec
出处 '?MT " G
rRzc"W}K+
进度条的实现可以通过下面的javascript实现： ,$<="kJk
<table align="center"><tr><td> f jm(
C#^-
<div style="font-size:8pt;padding:2px;border:solid black 1px"> j$Z:S~*
<span id="progress1"> </span> \ t^h|<`
<span id="progress2"> </span> !U8n=A#,-
<span id="progress3"> </span> 'WQ ?%da
<span id="progress4"> </span> | )M>;q
<span id="progress5"> </span> ;o-c.-!F
<span id="progress6"> </span> t
zV^.QWm
<span id="progress7"> </span> q aZQ1<
e
<span id="progress8"> </span> |g,99YIv>
<span id="progress9"> </span> pa8R;A70Dl
</div> 0l+[[ZTV
</td></tr></table> ft><Ql3
<script language="javascript"> #$0*Gd-N
var progressEnd = 9; // set to number of progress <span>'s. ?3=y]Vb+
var progressColor = 'blue'; // set to progress bar color e
.1!
K
var progressInterval = 1000; // set to time between updates (milli-seconds) ,zVS}!jRhy
V18 A|]k
var progressAt = progressEnd; !M@jW[s
var progressTimer; 0 n}2D7
function progress_clear() { n5>OZ3 E@
for (var i = 1; i <= progressEnd; i++) document.getElementById('progress'+i).style.backgroundColor = 'transparent'; s&7TARd
progressAt = 0; hnBX enT6
} T7R,6 qt
function progress_update() { v+(-\T\
i
progressAt++; Xb2.t^
]f
if (progressAt > progressEnd) progress_clear(); H[2W (q6
else document.getElementById('progress'+progressAt).style.backgroundColor = progressColor; }?^]-`b
progressTimer = setTimeout('progress_update()',progressInterval); Dgc}T8R
} 7Fzj&!>ti
function progress_stop() { zS*vKyye>
clearTimeout(progressTimer); =A{s,UP
progress_clear(); P:%r3F
} |.;*,bb|3
progress_update(); // start progress bar EGVS8YP>h
</script> :!yPR
实现的原理就是通过修改spanid的backgroundColor 值和setTimeout('progress_update()',progressInterval); bT15jNa
定时器函数来实现的。
|
|
|
|
[楼 主]
|
Posted: 2006-04-03 14:41 |
| |
常州五颜六色网络技术有限公司 -> 网站建设 -> 如何在网页上实现进度条
