BootStrap进度条动起来（定时）

最新推荐文章于 2020-12-29 06:44:34 发布

像极了夏洛特

最新推荐文章于 2020-12-29 06:44:34 发布

阅读量4.5k

点赞数

分类专栏： BootStrap简单使用文章标签：进度条 BootStrap 随着时间增加

本文链接：https://blog.csdn.net/d_bby/article/details/100185675

版权

BootStrap简单使用专栏收录该内容

0 篇文章 0 订阅

订阅专栏

在这里简单使用一下BootStrap里面的进度条（条纹动态效果，显示进度百分比），
使之每250毫秒增加百分之一，当达到百分之百时停止。

先展示代码：

<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
    <title>Bootstrap 模板</title>
	<script src="js/jquery-1.12.4.min.js"></script>
	<script src="js/bootstrap.min.js"></script>
    <link href="css/bootstrap.min.css" rel="stylesheet">
	<!-- 以上固定 -->
	</head>
	<body>
		<script>
			var i = 0;
			var mDiv = setInterval(function(){
				if(i>=100){
					clearInterval(mDiv);
				}
				var myDiv = document.getElementById("myDiv");
				myDiv.style.width = i+"%";
				myDiv.innerText = i+"%";
				i++;
			},250)
		</script>
		<div class="container" style="margin-top: 250px;">
			<div class="row">
				<div class="progress">
				  <div id="myDiv" class="progress-bar progress-bar-striped active" role="progressbar" aria-valuenow="45" aria-valuemin="0" aria-valuemax="100" style="width: 0%">
				   <!-- <span class="sr-only">45% Complete</span> -->
					0%
				  </div>
				</div>
			</div>
		</div>
	</body>
</html>

展示效果截图：
在这里插入图片描述