js进度条制作

css:

*{margin:0;padding:0;border:0;box-sizing: border-box;font: 14px/20px "microsoft yahei";}
ul,ol,li{
    list-style: none;
}
.hidden{
    display: hidden;
}
div.wrap{
    margin: 20px;
    height: 25px;
}
div.wrap span{
    line-height: 23px;
}
span.start{
    float: left;
    margin-right: 10px;
    cursor: pointer;
}
span.percent{
    color: #fff;
    float: right;
    margin-right: 5px;
    font-size: 12px;
}
div.box{
    display: inline-block;
    width: 256px;
    height: 25px;
    border: 1px solid #1BBB62;
    border-radius: 12px;
    overflow: hidden;
}
div.line{
    width: 0;
    height: 23px;
    background: #1BBB62;
}

html:

<div class="wrap">
    <span class="start" id="start">开始</span>
    <div class="box" id="box">
        <div class="line" id="line" w=89><span class="percent" id="per"></span></div>
    </div>
</div>

<script src="pro.js"></script>
<script>
    var oStart = document.getElementById("start");
    var move = new Move("start","per","line","box");
    oStart.onclick = function(){
        move.init();
    }
</script>

pro.js:

function Move(btn,per,line,box){
    this.oSt = document.getElementById(btn);
    this.oPer = document.getElementById(per);
    this.oLine = document.getElementById(line);
    this.oBox = document.getElementById(box);
    this.oAll = this.oBox.offsetWidth - 2;  //进度条总长度
    this.oTar = parseInt(this.oLine.getAttribute("w")/100*this.oAll);   //进度条目标长度
    this.onOff = false;         //进度条运动、暂停
    this.timer = null;
}

Move.prototype = {
    // 初始化
    init: function(){
        this.run();
        this.oSt.innerHTML = "暂停";
        var This = this;
        this.oSt.onclick = function(){
            if(This.onOff){
                This.oSt.innerHTML = "继续";
                clearInterval(This.timer);
                This.onOff = false;
            }else{
                This.oSt.innerHTML = "暂停";
                This.run();
                This.onOff = true;
            }
        }
    },
    // 获取当前滚动条长度
    nowlength: function(){
        return this.oLine.offsetWidth;
    },
    // 滚动条运动
    run: function(){
        this.onOff = true;
        var iSpeed = 0;     //速度
        var per = 0;
        var off = false;        //进度条是否运动到目标位置
        var This = this;
        this.timer = setInterval(function(){
            var iCur = This.nowlength();            //获取进度条当前长度
            per = Math.ceil(iCur/This.oAll*100);        // 获取当前百分数
            This.oPer.innerHTML = per + "%";
            iSpeed = Math.ceil((This.oTar - iCur)/9);   // 设置进度条速度
            This.oLine.style.width = iCur + iSpeed + "px";  // 进度条宽度累加
            if(iCur == This.oTar){
                off = true;
            }else{
                off = false;
            }
            if(off){
                This.oSt.innerHTML = "已结束";
                clearInterval(This.timer);
                This.onOff = false;
            }
            // console.log("target："+This.oTar +",iSpeed："+iSpeed+",iCur："+iCur+",off："+off);
        },30);
    }
}   

效果：
例子链接：http://pan.baidu.com/s/1nv4Nu69