阿七
级别: 未验证会员
精华:
0
发帖: 909
威望: 0 点
金钱: 2161 RMB
贡献值: 0 点
在线时间:512(小时)
注册时间:2006-03-29
最后登录:2008-08-07
|
如何在网页上实现进度条
如何在网页上实现进度条 -yP_S~ \n
出处 b;%>?U`>p
]KE"|}B
进度条的实现可以通过下面的javascript实现： |QB[f*y5
<table align="center"><tr><td> eT6T@C](
<div style="font-size:8pt;padding:2px;border:solid black 1px"> !omf>CW;ud
<span id="progress1"> </span> s'Wu \r'
<span id="progress2"> </span> A9\(vxxOpC
<span id="progress3"> </span> o-_H+p6a
<span id="progress4"> </span> =/SBZLR(9
<span id="progress5"> </span> I$w:qS&:
<span id="progress6"> </span> pDV8B/{
<span id="progress7"> </span> b
x8;`Q MX
<span id="progress8"> </span> K
@>($BX]
<span id="progress9"> </span> N>Q~WXvV#
</div> g ?i0WS
</td></tr></table> vkE a [7
<script language="javascript"> " ';K$&,[
var progressEnd = 9; // set to number of progress <span>'s. Q
.Xs%{B
var progressColor = 'blue'; // set to progress bar color {q1u[T&r
var progressInterval = 1000; // set to time between updates (milli-seconds) @
Tz}y" VG
5~GH*!h%;
var progressAt = progressEnd; ]m <
z
var progressTimer; !THa?U;
function progress_clear() { Ssg1p#0J
for (var i = 1; i <= progressEnd; i++) document.getElementById('progress'+i).style.backgroundColor = 'transparent'; Jy?;
<
progressAt = 0; Q"F" 13
} {U"=}j(
function progress_update() { z,xGjS P
progressAt++; l#bE _PD;
if (progressAt > progressEnd) progress_clear(); V
0z`p"
else document.getElementById('progress'+progressAt).style.backgroundColor = progressColor; i# bc
jH
progressTimer = setTimeout('progress_update()',progressInterval); eY\w ?pT2
} t 0.71(
function progress_stop() { Lq2ZgKd!
clearTimeout(progressTimer); Nbb2 wr9A
progress_clear(); s( (c @)M
} B]u !BBjC
progress_update(); // start progress bar -an~&C5\
</script> |'qvq /#^
实现的原理就是通过修改spanid的backgroundColor 值和setTimeout('progress_update()',progressInterval); H/}W_ h^^
定时器函数来实现的。
|
|
|
|
[楼 主]
|
Posted: 2006-04-03 14:41 |
| |
常州五颜六色网络技术有限公司 -> 网站建设 -> 如何在网页上实现进度条
