阿七
级别: 未验证会员
精华:
0
发帖: 909
威望: 0 点
金钱: 2161 RMB
贡献值: 0 点
在线时间:512(小时)
注册时间:2006-03-29
最后登录:2008-08-07
|
如何在网页上实现进度条
如何在网页上实现进度条 D }b+#G(m[
出处 7(gQ6?KsZ
/\#qz.c2K
进度条的实现可以通过下面的javascript实现： D5AKOM!`
<table align="center"><tr><td> H+*o @0C\~
<div style="font-size:8pt;padding:2px;border:solid black 1px"> wW !*"z
<span id="progress1"> </span> v,p/r )E
<span id="progress2"> </span> W d Ir 3
<span id="progress3"> </span> kFuaLEJi
<span id="progress4"> </span> 3+n&Ya1
<span id="progress5"> </span> n %"s_W'E
<span id="progress6"> </span> ~rn82an@G
<span id="progress7"> </span> / 6L\`
\g
<span id="progress8"> </span> .b noK
<span id="progress9"> </span> aEX+M57k~
</div> _Vp9Y:mX2
</td></tr></table> qx`*]lX
<script language="javascript"> "d.qmM
var progressEnd = 9; // set to number of progress <span>'s. NG S/lKz
var progressColor = 'blue'; // set to progress bar color M[Tg NWl/[
var progressInterval = 1000; // set to time between updates (milli-seconds) `n5|4yaG~
w6#hsRq[C
var progressAt = progressEnd; /=Q7RJ@P
var progressTimer; s "*Cb*
function progress_clear() { oN)K2&M 0
for (var i = 1; i <= progressEnd; i++) document.getElementById('progress'+i).style.backgroundColor = 'transparent'; c&F"tLl
progressAt = 0; Dc BTW+
} p^~lQ8t
function progress_update() { rxm!'.+
progressAt++; )v
['p
if (progressAt > progressEnd) progress_clear(); dwJ 'hg
else document.getElementById('progress'+progressAt).style.backgroundColor = progressColor; X g.\B1d
progressTimer = setTimeout('progress_update()',progressInterval); Hh54&YKZ
} *"1]NAz+
function progress_stop() { Eiz\Nb
clearTimeout(progressTimer); Pme`UcE3H
progress_clear(); +2C:]
} h r t\
progress_update(); // start progress bar `iQyKZS/+
</script> (lEWnf=2h
实现的原理就是通过修改spanid的backgroundColor 值和setTimeout('progress_update()',progressInterval); Cw Z{&
定时器函数来实现的。
|
|
|
|
[楼 主]
|
Posted: 2006-04-03 14:41 |
| |
常州五颜六色网络技术有限公司 -> 网站建设 -> 如何在网页上实现进度条
