Django实用技巧--进度条(基于bootstrap）
程序员文章站
2024-02-02 12:00:28
...
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>