jQuery 进度条实现

1、

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>进度条</title>
    <script src="./js/jquery-1.12.4.js"></script>
    <style>
        #box {
            width: 180px;
            height: 16px;
            background: black;
            border-radius: 12px;
        }

        .progress {
            width: 180px;
            height: 16px;
            background: url("./images/progress.png") no-repeat 0 0;


        }
    </style>
</head>

<body>
    <div id="box">
        <div class="progress"></div>
    </div>
    <button id="button">开始</button>
    
</body>

</html>

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)
        }

jQuery 进度条实现

jQuery 进度条实现

悦读