jQuery 进度条实现

jQuery 进度条实现

1、

    
    
    
    



    

        

    
    开始
    

2、js文件

        // 监听开始按钮的点击
        $("#button").click(function () {
         
            // 进度条
            progressBar();
        });
        // 进度条方法
        function progressBar() {
            $(".progress").css({
                width: 180
            });
            var bar = setInterval(function () {
                nowWidth = $(".progress").width();

                nowWidth -= 1
                $(".progress").css({
                    width: nowWidth
                });
                // 监听进度条是否走完
                if (nowWidth <= 0) {
                    // 关闭定时器
                    clearInterval(bar);
                    $(".progress").css({
                width: 180
            });
                }
            }, 100)
        }