Jquery 一个进度条方法

效果展示

html部分

<div class="bac"><div class="progress"></div></div>
<button class="start">点击开始</button>
 <button class="stop">点击暂停</button>

css部分

.bac{
        background-color: black;//进度条北京
        height: 16px;
        width: 180px;
        position: relative;
        border-radius: 8px;
        margin-bottom: 10px;
    }
        .progress{
            width: 180px;
            height: 16px;
            background: url("imgs/progress.png") no-repeat 0 0;//进度条的图片
            position: absolute;
            top:0px; left:0;
        }

这里用了子绝父相（.son:absolute father:relative）的定位方法，以便于图片可以覆盖在黑色的背景颜色上

script部分

 var timer;
         $('.start').click(function () 
        //开启定时器
         timer=setInterval(function () {
            var progresswidth=$('.progress').width();//拿到进度条当前的宽度
            progresswidth-=5;
            $('.progress').css({
                width:progresswidth
            })
        },200)
    })
     $('.stop').click(function () {
         clearTimeout(timer);
     })

本文地址：https://blog.csdn.net/weixin_45439010/article/details/109236791