# Wednesday, June 22, 2005
改进版的渐变效果进度条

对原来的版本的渐变效果进度条做了改进，抛弃了长度达256的数组，并修改了样式表，实现了大幅度减少资源消耗。请看效果 。

具体程序如下：

<html>
<head>
<title>渐变效果进度条</title>
<script language="javascript">
 var i;
 function go()
 {
  bar_width = document.getElementById("bg").clientWidth;
  i = bar_width;
  setTimeout('start();',300);
 }
 function start()
 {
  if(i-->0)
  {
   ps.style.width = i;
   bn.innerHTML = Math.floor((bar_width-i)/bar_width*100)+"%";
   setTimeout('start();',20);
  }
 }
 
</script>
<style type="text/css">
#bg {
filter:progid:DXImageTransform.Microsoft.Gradient
(GradientType=1, StartColorStr=#FFFF00, EndColorStr=#FF0000);
width:300px;
height:20px;
border:1px solid black;
z-index:0;
position:absolute;
}
#ps {
float:right;
background-color:#FFFF00;
width:100%;
}
#bn {
position:absolute;
text-align:center;
width:100%;
height:100%;
cursor:default;
}
</style>
</head>
<body onload="go();">
<div id="bg"><div id="ps"></div><span id="bn">0%</span></div>
</body>
</html>

JAVASCRIPT
posted on Wednesday, June 22, 2005 11:23:54 AM (China Standard Time, UTC+08:00)  #    Comments [4]
Related posts:
Microsoft Anti-Cross Site Scripting Library V1.5 发布了
支持百度的搜索引擎来源的关键字加亮
利用正则表达式限制网页表单里的文本框输入内容
js写的Hashtable类
偶做的渐变效果进度条
批量对加密的asp代码解密的asp程序
 Tracked by:
"asp.net中使用多线程和ajax解决长时间执行任务" (QIHANGNET) [Trackback]
http://www.qihangnet.com/PermaLink,guid,0d823e8e-0d16-43b4-8ebf-113d0fddd11e.asp... [Pingback]
Wednesday, June 22, 2005 11:26:33 AM (China Standard Time, UTC+08:00)
遗憾的是，目前尚不支持firefox和opera等浏览器，仅对IE表现出很好的效果。
qihangnet
Tuesday, July 05, 2005 12:46:36 AM (China Standard Time, UTC+08:00)
在http://www.flashanywhere.net/map.cfm看到你的Blog，从地理位置看（如果你没标错），我离你所在的地方只隔一条街，我在外贸那边住，没理由不交个朋友。
张智勇
Tuesday, July 12, 2005 9:15:29 AM (China Standard Time, UTC+08:00)
呵呵，好啊。我在长途汽车大厦
qihangnet
Saturday, July 30, 2005 2:58:02 PM (China Standard Time, UTC+08:00)
效果很好， 可就是不知道怎么应用起来。
如， 我要上传一个大文件，要怎么样用进度条来显示上传进度？？？？
chengulv
Comments are closed.

Page rendered at Thursday, August 28, 2008 12:24:44 PM (China Standard Time, UTC+08:00)