20150621进度条

<div id="a">
    <div id="b">0%</div>
    <div id="c">0%</div>
</div>


#a{ 300px;height: 40px;line-height: 40;position: relative;border: 1px solid black;}
#b{background: blue;z-index: 2;position: absolute;left: 0;top: 0;clip:rect(0px 0px 40px 0px); 100%;height: 40px;line-height: 40px;color:white;text-align: center;}
#c{ :100%;height: 40px;line-height: 40px;text-align: center;}


window.onload=function () {
    var iNow=5;
    var timer=setInterval(function () {
        if(iNow==100){
            clearInterval(timer);
        }else{
            iNow+=5;
            move(iNow)
        }
    },50);
    var a=document.getElementById('a');
    var b=document.getElementById('b');
    var c=document.getElementById('c');
    function move(n) {
        b.innerHTML=n+'%';
        c.innerHTML=n+'%';
        b.style.clip='rect(0px '+(n/100)*300+'px 40px 0px)'        
    }
}