bootstrap-简单进度条

最新推荐文章于 2023-08-26 16:12:26 发布

夏沐春休

最新推荐文章于 2023-08-26 16:12:26 发布

阅读量129

点赞数

分类专栏： bootstrap jQuery 文章标签： bootstrap html 前端

本文链接：https://blog.csdn.net/m0_53336918/article/details/127056102

版权

jQuery 同时被 2 个专栏收录

3 篇文章 0 订阅

订阅专栏

bootstrap

1 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="zh-CN">
	<head>
		<meta charset="utf-8" />
		<title></title>
		<link rel="stylesheet" href="3rd/bootstrap/css/bootstrap.min.css"/>
	</head>
	<body>
		
		
		<div class="progress">
		  <div id="d1" class="progress-bar progress-bar-success progress-bar-striped active" role="progressbar" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100" style="width: 0%">
		    <span></span>%
		  </div>
		</div>
		
		<script src="3rd/jquery-2.2.4.min.js"></script>
		<script src="3rd/bootstrap/js/bootstrap.min.js"></script>
		<script>
			setInterval(go,1000);
			var count = 0;
			function go(){	
				count++;
				$("#d1").css("width",count + "%");
				$("#d1 span").html(count);
				if(count >= 100){
					count = 0;
				}
			
			}
		</script>
	</body>
</html>

运行结果：