阿七
级别: 未验证会员
精华:
0
发帖: 909
威望: 0 点
金钱: 2161 RMB
贡献值: 0 点
在线时间:512(小时)
注册时间:2006-03-29
最后登录:2008-08-07
|
如何在网页上实现进度条
如何在网页上实现进度条 hahD.P<
出处 Ytnr$*5.
zyn =Xv@p
进度条的实现可以通过下面的javascript实现： =<uz'\Ytv%
<table align="center"><tr><td> j N{xpd
<div style="font-size:8pt;padding:2px;border:solid black 1px"> 5:3$VWLa
<
<span id="progress1"> </span> W jxBNk'f
<span id="progress2"> </span> t"Rf67
<span id="progress3"> </span> ?Lb7~XK
t\
<span id="progress4"> </span> YZu# 0)
<span id="progress5"> </span> 7Ki7N{K t
<span id="progress6"> </span> ]`U?<9~Ob
<span id="progress7"> </span> n E.s
<span id="progress8"> </span> eb woMG,B-
<span id="progress9"> </span> %pKs- n`
</div> AQGE(%X
</td></tr></table> 5fv6R
QD
<script language="javascript"> XE
%6c3s
var progressEnd = 9; // set to number of progress <span>'s. *Z(C' )7r
var progressColor = 'blue'; // set to progress bar color e%7P$.
var progressInterval = 1000; // set to time between updates (milli-seconds) 9cPucKuj
pl/$@K?L
var progressAt = progressEnd; Lh $ac-Ct
var progressTimer; U .jMK{
function progress_clear() {
:dc
J6
for (var i = 1; i <= progressEnd; i++) document.getElementById('progress'+i).style.backgroundColor = 'transparent'; G?(:Z=
progressAt = 0; 0 1w/,r
} 0t yU%z{RV
function progress_update() { 'v)+S;oB
progressAt++; \"j1fAD!
if (progressAt > progressEnd) progress_clear(); (Gs g+c
else document.getElementById('progress'+progressAt).style.backgroundColor = progressColor; 9 peB+URV
progressTimer = setTimeout('progress_update()',progressInterval); 3Or3@e5r
} ew~FN
function progress_stop() { ?7s
clearTimeout(progressTimer); ^<b.j.$<z
progress_clear(); co-D,o4x
} NE nP3A
progress_update(); // start progress bar 2AE|N_v8W
</script> S jU6+|l
实现的原理就是通过修改spanid的backgroundColor 值和setTimeout('progress_update()',progressInterval); 1 crjRbi
定时器函数来实现的。
|
|
|
|
[楼 主]
|
Posted: 2006-04-03 14:41 |
| |
常州五颜六色网络技术有限公司 -> 网站建设 -> 如何在网页上实现进度条
