改进版的渐变效果进度条

衣明志 发表于 , 阅读 (15601)

对原来的版本的渐变效果进度条做了改进,抛弃了长度达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>
5 条评论
qihangnet
qihangnet 2005-06-22 23:26
遗憾的是,目前尚不支持firefox和opera等浏览器,仅对IE表现出很好的效果。
张智勇
张智勇 2005-07-05 12:46
在http://www.flashanywhere.net/map.cfm看到你的Blog,从地理位置看(如果你没标错),我离你所在的地方只隔一条街,我在外贸那边住,没理由不交个朋友。
qihangnet
qihangnet 2005-07-12 21:15
呵呵,好啊。我在长途汽车大厦
chengulv
chengulv 2005-07-31 02:58
效果很好, 可就是不知道怎么应用起来。 如, 我要上传一个大文件,要怎么样用进度条来显示上传进度????
walkingp
walkingp 2009-12-16 08:24
firefox不起作用。 还有一个问题,你的博客在firefox“记住我”没有实现。 名称 ASP.NET_SessionId 值 cusgqcii15svsm55nogpau45 主机 www.qihangnet.com 恐怕cookie没有保存下来吧。