使用jquery實現進度條效果

很多時候，我們系統的進度信息有個進度條看起來效果更好，我們可以使用動態改變div占比的方案來做：

效果:

 

style樣式：

   <style type="text/css">
        #parent{border:1px #EEE solid;width: 500px;height: 30px;margin: 0 auto;}
        #child{width: 50%;height: 30px;background-color: lime;}
        p{text-align: center;color: fuchsia;}
    </style>

 

HTML代碼：

    <p id="info"></p>
    <div id="parent">
        <div id="child"></div>
    </div>

JS代碼：

//記錄進度
        var pro=0;
        //定時函數進行更新
        var update=setInterval(function(){
            //進度改變
            pro++;
            //文字提示
            $("#info").text("正在更新："+pro+"%");
            //動態改變div的寬度占比
            $("#child").width(pro+"%");
            //控制更新
            if(pro==100){
                //清除定時器，停止更新
                clearInterval(update);
                alert("恭喜，更新成功！");
            }
        },100);