Django实用技巧--进度条(基于bootstrap）

1.效果如下：

在这里插入图片描述
2.代码如下

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link href="./static/css/bootstrap.min.css" rel="stylesheet">
    <script src="./static/js/jquery1.12.4.js"></script>
    <script src="./static/js/bootstrap.min.js"></script>
    <script src="./static/js/docs.min.js"></script>
    <style>
        .progress-div{
            background: rgba(0, 0, 0, 0.03);
            width: 1000px;
            height: 140px;
            padding: 60px 20px;
            visibility: hidden;
        }
        .progress{
            margin: 0;
            /*position: fixed;*/
            /*top: 100px;*/
            /*left: 20px;*/
            width: 100%;
        }
    </style>
    <title>进度条</title>
</head>

<body>
    <!--1. 按钮-->
    <div class="container">
        <button class="btn btn-default" type="button">展示进度条</button>

	    <!--2. 进度条-->
	    <div  class="progress-div">
	        <div class="progress">
	            <div class="progress-bar progress-bar-striped active" role="progressbar" aria-valuenow="2" aria-valuemin="0" aria-valuemax="100" style="min-width: 2em; width: 2%;">
	                2%
	            </div>
	        </div>
	    </div>

    </div>
</body>
<script>
    $(function () {
        $('.btn').on('click', function () {
            // console.log(1);
            var progress =2 ;
            $('.progress-div').css('visibility', 'visible');
            // 设置周期定时器，改变进度条长度
            var timeID1 = setInterval(function () {
                // progress += 2;
                // console.log(progress);
                $('.progress-bar').css('width', progress + '%');
                $('.progress-bar').text(progress + '%');
                if (progress >= 100) {
                    console.log(1);
                    clearInterval(timeID1);
                    $('.progress-bar').css('width', '100%');
                    $('.progress-bar').text('100%');
                        // 设置一次性定时器，让进度条延迟隐藏
                    var timeID2 = setTimeout(function () {
                        clearTimeout(timeID2);
                        $('.progress-div').css('visibility', 'hidden');
                        // 进度条初始化
                        console.log('2');
                        $('.progress-bar').css('width', '2%');
                        $('.progress-bar').text('2%');

                    },1000);
                }else {
                    progress += 2;
                }
            },100);

        })
    })
</script>
</html>
Django实用技巧--进度条(基于bootstrap）

1.效果如下：

2.代码如下

猜你喜欢
