使用jquery实现进度条效果

时间:2024-02-22 15:08:23

很多时候,我们系统的进度信息有个进度条看起来效果更好,我们可以使用动态改变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);