阿七
级别: 未验证会员
精华:
0
发帖: 909
威望: 0 点
金钱: 2161 RMB
贡献值: 0 点
在线时间:512(小时)
注册时间:2006-03-29
最后登录:2008-08-07
|
如何在网页上实现进度条
如何在网页上实现进度条 !%V*UR9
出处 ~tt KI4
h&P
{p _Y
进度条的实现可以通过下面的javascript实现： La]4/=a
<table align="center"><tr><td> RJLFj
<div style="font-size:8pt;padding:2px;border:solid black 1px"> 4M7^
[G
<span id="progress1"> </span> );!dg\U
<span id="progress2"> </span> l<Lz{)OR
<span id="progress3"> </span> Y!aLf[x]
<span id="progress4"> </span> k0knPDbHv
<span id="progress5"> </span> UC(9Dz
<span id="progress6"> </span> %^T!@uZr
<span id="progress7"> </span> "d2LyQy
<span id="progress8"> </span> g/6nw a
<span id="progress9"> </span> [m
%W
: Ez
</div> n-W?Z'H{r
</td></tr></table> -C=]n<ak
<script language="javascript"> uZ-`fcCjD
var progressEnd = 9; // set to number of progress <span>'s. K# / Ch5?
var progressColor = 'blue'; // set to progress bar color bYK]G+
Ww
var progressInterval = 1000; // set to time between updates (milli-seconds) M{G$Pk8 [
uV!MW= )
var progressAt = progressEnd; GgT=t)}wu
var progressTimer; 6S)$3Is
function progress_clear() { f7S^yA[[
for (var i = 1; i <= progressEnd; i++) document.getElementById('progress'+i).style.backgroundColor = 'transparent';
-GK 'V
progressAt = 0; aK!xRnY
} "\}21B~{7'
function progress_update() { i pfm'aQ
progressAt++; k -io$
if (progressAt > progressEnd) progress_clear(); |HNQ|r_5S
else document.getElementById('progress'+progressAt).style.backgroundColor = progressColor; ~T;K-9R
progressTimer = setTimeout('progress_update()',progressInterval); e
W9)@nVJ
} p?_'|#tz
function progress_stop() { ^GrNfB[Qu
clearTimeout(progressTimer); Vvx a.B
progress_clear(); *1R##9\jU7
} neK*jdaP
progress_update(); // start progress bar r*c82}tc
</script> 2&suo!ig
实现的原理就是通过修改spanid的backgroundColor 值和setTimeout('progress_update()',progressInterval); XryQ)x(
定时器函数来实现的。
|
|
|
|
[楼 主]
|
Posted: 2006-04-03 14:41 |
| |
常州五颜六色网络技术有限公司 -> 网站建设 -> 如何在网页上实现进度条
