阿七
级别: 未验证会员
精华:
0
发帖: 909
威望: 0 点
金钱: 2161 RMB
贡献值: 0 点
在线时间:512(小时)
注册时间:2006-03-29
最后登录:2008-08-07
|
如何在网页上实现进度条
如何在网页上实现进度条 0
ckmHv
出处 .rITzwgB
<_ENC>NP
进度条的实现可以通过下面的javascript实现： j Rd$Vt
<table align="center"><tr><td> ]Vmo >
<div style="font-size:8pt;padding:2px;border:solid black 1px"> reNf?7G+m
<span id="progress1"> </span> #UhH
<span id="progress2"> </span> R :(-"GW'
<span id="progress3"> </span> Fe4>G8uuwn
<span id="progress4"> </span> d# ]hq y
<span id="progress5"> </span> Fi67"*gE
<span id="progress6"> </span> J{.UUw9Agd
<span id="progress7"> </span> ;kY~-Om
<span id="progress8"> </span> aWlIq(dU
<span id="progress9"> </span> KN[;z2i
</div> ~bC A8
</td></tr></table> $xbW*w
<script language="javascript"> \
ZE[7Ae
var progressEnd = 9; // set to number of progress <span>'s. `:;q4zi j;
var progressColor = 'blue'; // set to progress bar color Y*PfU +y~
var progressInterval = 1000; // set to time between updates (milli-seconds) P!E2.K,
Z#L4n#TT
var progressAt = progressEnd; )t"-#$,@
var progressTimer; |5tZ*$nGa
function progress_clear() { y:}qoT_.
for (var i = 1; i <= progressEnd; i++) document.getElementById('progress'+i).style.backgroundColor = 'transparent'; I](a 5i
progressAt = 0; |Rz.P
t6
} |[IyqWG9
function progress_update() { } P ,"
progressAt++; Mh4MaLw
if (progressAt > progressEnd) progress_clear(); Lr D@QBT
else document.getElementById('progress'+progressAt).style.backgroundColor = progressColor; DkEv1]6JI_
progressTimer = setTimeout('progress_update()',progressInterval); r O$pj~!|Q
} 8zD>t~N2C
function progress_stop() { P .m@|w&.K
clearTimeout(progressTimer); ur\6~'l4
progress_clear(); JRo/ HY+
} ,;6V=ok
progress_update(); // start progress bar [jzsB:;XB&
</script>
r!?ga
实现的原理就是通过修改spanid的backgroundColor 值和setTimeout('progress_update()',progressInterval); v}6iI}r
定时器函数来实现的。
|
|
|
|
[楼 主]
|
Posted: 2006-04-03 14:41 |
| |
常州五颜六色网络技术有限公司 -> 网站建设 -> 如何在网页上实现进度条
