<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta http-equiv="content-Type" charset="UTF-8">
<meta http-equiv="x-ua-compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Title</title>
<link rel="stylesheet" href="bootstrap-3.3.7/css/bootstrap.css">
</head>
<body>
<div class="container">
<div class="progress">
<div id="p1" class="progress-bar progress-bar-warning progress-bar-striped active" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="min-width: 2%;">
0%
</div>
</div>
<button id="i1" class="btn btn-success">起飞！</button>
</div>
<script src="jquery-3.3.1.js"></script>
<script src="bootstrap-3.3.7/js/bootstrap.js"></script>
<script>
var x=0;
var t;
function setWidth(){
if (x<100){
x += 1;
$("#p1").css("width", x+"%").text(x+"%");
} else {
// 进度条走完要停止定时器
clearInterval(t);
}
}
$("#i1").click(function () {
t = setInterval(setWidth, 100)
});
</script>
</body>
</html>