改进版的渐变效果进度条

标签 JAVASCRIPT

Jun 21 2005 8:23 PM

对原来的版本的渐变效果进度条做了改进，抛弃了长度达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评论

添加评论