阿七
级别: 未验证会员
精华:
0
发帖: 909
威望: 0 点
金钱: 2161 RMB
贡献值: 0 点
在线时间:512(小时)
注册时间:2006-03-29
最后登录:2008-08-07
|
如何在网页上实现进度条
如何在网页上实现进度条 H5
:f&m
出处 p7r/`_'|
8B(
v6(h
进度条的实现可以通过下面的javascript实现： MQ0r ln?
<table align="center"><tr><td> _ F|}=^Z`
<div style="font-size:8pt;padding:2px;border:solid black 1px"> &,{YfAxQ`
<span id="progress1"> </span> \ a
(ce?C
<span id="progress2"> </span> [8[<4~{
<span id="progress3"> </span> s2 :Vm\
<span id="progress4"> </span> 8gt&*;'}*D
<span id="progress5"> </span> dB0
UZirb
<span id="progress6"> </span> be5N{lPT@;
<span id="progress7"> </span> b >
k 2@
<span id="progress8"> </span> X:g#& e_
<span id="progress9"> </span> x ',6VTz^
</div> 4udj"-V
</td></tr></table> 9tVV?Q@)
<script language="javascript"> # k `gm)|
var progressEnd = 9; // set to number of progress <span>'s. q(~|roKA(
var progressColor = 'blue'; // set to progress bar color jiLJiYMg
var progressInterval = 1000; // set to time between updates (milli-seconds) . _`rh
W7!iYxO
var progressAt = progressEnd; ylQj2B,
CB
var progressTimer; o;
U!{G(X
function progress_clear() { g-"G Zi
for (var i = 1; i <= progressEnd; i++) document.getElementById('progress'+i).style.backgroundColor = 'transparent'; :XG~AR /
progressAt = 0; mw;4/
/R
} FOMJRq
function progress_update() { x-%RRm<V
progressAt++; M6N p!0
G
if (progressAt > progressEnd) progress_clear(); #Nc o|v
else document.getElementById('progress'+progressAt).style.backgroundColor = progressColor;
/7:+.#Ag`
progressTimer = setTimeout('progress_update()',progressInterval); 5$N#=i `V
} @h!Z0}d X(
function progress_stop() { K5 BL4N
clearTimeout(progressTimer); eNVuw: Q+
progress_clear(); hwJ>IQ1
} x|G
:;{"+6
progress_update(); // start progress bar zp<B,Ls
</script> 7} 6CUo
实现的原理就是通过修改spanid的backgroundColor 值和setTimeout('progress_update()',progressInterval); v:yU+s|kN
定时器函数来实现的。
|
|
|
|
[楼 主]
|
Posted: 2006-04-03 14:41 |
| |
常州五颜六色网络技术有限公司 -> 网站建设 -> 如何在网页上实现进度条
