明志唯新

改进版的渐变效果进度条

发表于

对原来的版本的渐变效果进度条做了改进(针对 IE 浏览器),抛弃了长度达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>