» 您尚未 登录   注册 | 社区服务 | 帮助 | 社区 | 无图版


常州五颜六色网络技术有限公司 -> 网站建设 -> 如何在网页上实现进度条
 XML   RSS 2.0   WAP 

--> 本页主题: 如何在网页上实现进度条 加为IE收藏 | 收藏主题 | 上一主题 | 下一主题
阿七




该用户目前不在线
级别: 未验证会员
精华: 0
发帖: 909
威望: 0 点
金钱: 2161 RMB
贡献值: 0 点
在线时间:512(小时)
注册时间:2006-03-29
最后登录:2008-08-07
查看作者资料 发送短消息 推荐此帖 引用回复这个帖子

如何在网页上实现进度条

如何在网页上实现进度条 $(3uOsy   
出处   (Ux [[  
syR N4  
进度条的实现可以通过下面的javascript实现: J smB^  
<table align="center"><tr><td> z?4=h Sy  
<div style="font-size:8pt;padding:2px;border:solid black 1px"> G{+2x N a(  
<span id="progress1">   </span> dq(E&`SzK  
<span id="progress2">   </span> p-xd k|'[  
<span id="progress3">   </span> K3L"^a  
<span id="progress4">   </span> $Zxt&a  
<span id="progress5">   </span> "TNVD"RLY  
<span id="progress6">   </span> z6I%wh  
<span id="progress7">   </span> Z|I-BPyn  
<span id="progress8">   </span> GWdSSr>  
<span id="progress9">   </span> U7h(-dV   
</div> BZ+;n |<r  
</td></tr></table> !p',Za   
<script language="javascript"> s7l23*Czl  
var progressEnd = 9; // set to number of progress <span>'s. nR[^|CAR  
var progressColor = 'blue'; // set to progress bar color [pL*@9Sa&  
var progressInterval = 1000; // set to time between updates (milli-seconds) JRY_ nX  
Ys3uPs  
var progressAt = progressEnd; 6e.[,-eU  
var progressTimer; Q+'nw9:;T  
function progress_clear() { ~x#vZ=]8  
for (var i = 1; i <= progressEnd; i++) document.getElementById('progress'+i).style.backgroundColor = 'transparent'; Xb,T{.3@  
progressAt = 0; Da_()e[9p  
} +D`*\d1  
function progress_update() { R/~,i;d>  
progressAt++; )+EN$*H  
if (progressAt > progressEnd) progress_clear(); E oe}l   
else document.getElementById('progress'+progressAt).style.backgroundColor = progressColor; ]C!?HQ{bsf  
progressTimer = setTimeout('progress_update()',progressInterval); S&wzB)#'  
} g`[$Xi R  
function progress_stop() { >{nH v)  
clearTimeout(progressTimer); a <wL#Id  
progress_clear();  #^0(  
} E ]f)Os$  
progress_update(); // start progress bar WU)Ss`s \  
</script> FFvCi@oT  
实现的原理就是通过修改spanid的backgroundColor 值和setTimeout('progress_update()',progressInterval); BJy;-(JP  
定时器函数来实现的。

[楼 主] | Posted: 2006-04-03 14:41 顶端

常州五颜六色网络技术有限公司 -> 网站建设



Copyright © 2005-2009 5y6s Inc. 苏ICP备05001866号 Powered by PHPWind 5.0.1
Total 0.009287(s) query 4, Gzip enabled
会员言论不代表本站立场 本站法律顾问:北京汇泽律师事务所 韩律师
QQ:点击这里给我发消息 /点击这里给我发消息 /点击这里给我发消息
51La