阿七
级别: 未验证会员
精华:
0
发帖: 909
威望: 0 点
金钱: 2161 RMB
贡献值: 0 点
在线时间:512(小时)
注册时间:2006-03-29
最后登录:2008-08-07
|
如何在网页上实现进度条
如何在网页上实现进度条 +UzXN$73
出处 ^IBGYl 5n
M ;*$gV<x
进度条的实现可以通过下面的javascript实现： wa!zv^;N*
<table align="center"><tr><td> 20aZI2sk`
<div style="font-size:8pt;padding:2px;border:solid black 1px"> EZ<80G
<span id="progress1"> </span> B/mYoK
<span id="progress2"> </span> Vv
yj
<span id="progress3"> </span> .d~\Ysve
<span id="progress4"> </span> ]ni6p&b>
<span id="progress5"> </span>
9R
QU?
<span id="progress6"> </span> A:eFd]E{(
<span id="progress7"> </span> F.<L>
G7{1
<span id="progress8"> </span> 7:>s c]Z
<span id="progress9"> </span> j$Nf%V 6Y
</div> (YwalfG {C
</td></tr></table> %ISq>A)%
<script language="javascript"> rfs(#
var progressEnd = 9; // set to number of progress <span>'s. l& L,7BX
var progressColor = 'blue'; // set to progress bar color rVH6 QQF=\
var progressInterval = 1000; // set to time between updates (milli-seconds) gWOt]D&#/
sw
$ 2d
var progressAt = progressEnd; Vr/Bu4V"
var progressTimer; D9BQID$R
function progress_clear() { vT c7an6fy
for (var i = 1; i <= progressEnd; i++) document.getElementById('progress'+i).style.backgroundColor = 'transparent'; nIn2 *r
progressAt = 0; N}b^fTq
} uvnI>gv
function progress_update() { W;zpt|kAH
progressAt++; XJ gh>^R^
if (progressAt > progressEnd) progress_clear(); rkDi+D 6`q
else document.getElementById('progress'+progressAt).style.backgroundColor = progressColor; +-BwQ{92[:
progressTimer = setTimeout('progress_update()',progressInterval); "uKFOV?j&
} |sIr?RL{C
function progress_stop() { nPFwPk8=M
clearTimeout(progressTimer); a460|w6
progress_clear(); 2&he($HIzg
} ;3"@g]
e
progress_update(); // start progress bar s5D :
</script> y$ b]7O
实现的原理就是通过修改spanid的backgroundColor 值和setTimeout('progress_update()',progressInterval); \X|sU:g
定时器函数来实现的。
|
|
|
|
[楼 主]
|
Posted: 2006-04-03 14:41 |
| |
常州五颜六色网络技术有限公司 -> 网站建设 -> 如何在网页上实现进度条
