阿七
级别: 未验证会员
精华:
0
发帖: 909
威望: 0 点
金钱: 2161 RMB
贡献值: 0 点
在线时间:512(小时)
注册时间:2006-03-29
最后登录:2008-08-07
|
如何在网页上实现进度条
如何在网页上实现进度条 -6(u09mb_
出处 vf=b5s(7Q
>z'kCv
进度条的实现可以通过下面的javascript实现： ).[Mnt/Ft
<table align="center"><tr><td> Byx8`Cx1
<div style="font-size:8pt;padding:2px;border:solid black 1px"> n>d@}hyv
<span id="progress1"> </span> FL}k0
<span id="progress2"> </span> <!ewb=[_$
<span id="progress3"> </span>
jpc bW
<span id="progress4"> </span> r=Up-(j
<span id="progress5"> </span> -e6~0% X
<span id="progress6"> </span> `:hEc<_/
<span id="progress7"> </span> =Ri' Pr x&
<span id="progress8"> </span> p<5ED\;N;
<span id="progress9"> </span> BU-m\Kf)
</div> Tx)X\&ij&
</td></tr></table> ][ri
A
<script language="javascript"> a2l\B ~n
var progressEnd = 9; // set to number of progress <span>'s. e;1n!
_l\
var progressColor = 'blue'; // set to progress bar color OF^:_%c
/
var progressInterval = 1000; // set to time between updates (milli-seconds) 6#egy|("nF
~f/nq/8
var progressAt = progressEnd; [yzDa:%
var progressTimer; 739J] M
function progress_clear() { V2< 4~J2:9
for (var i = 1; i <= progressEnd; i++) document.getElementById('progress'+i).style.backgroundColor = 'transparent'; 0/".2(\}T
progressAt = 0; !+ qy~h
} F Bn`sS8hH
function progress_update() { rFY% fo
progressAt++; J&%d(EJM
if (progressAt > progressEnd) progress_clear(); _wa1R+`_
else document.getElementById('progress'+progressAt).style.backgroundColor = progressColor; 4wLp
progressTimer = setTimeout('progress_update()',progressInterval); x.Sq2rw]V
} $S~e"ca1
function progress_stop() { /RL eD
clearTimeout(progressTimer); % _*q'6K
progress_clear(); *], ]E;
} -"u9s[L{
progress_update(); // start progress bar ? n$;l-m[
</script> [cSo o+Mlx
实现的原理就是通过修改spanid的backgroundColor 值和setTimeout('progress_update()',progressInterval); jl# )CEx
定时器函数来实现的。
|
|
|
|
[楼 主]
|
Posted: 2006-04-03 14:41 |
| |
常州五颜六色网络技术有限公司 -> 网站建设 -> 如何在网页上实现进度条
