对进度条效果进行js代码封装

最新推荐文章于 2023-10-29 22:43:37 发布

浅浅呐

最新推荐文章于 2023-10-29 22:43:37 发布

阅读量319

点赞数

分类专栏：前端文章标签：进度条 js 前端

本文链接：https://blog.csdn.net/qq_41445106/article/details/95925430

版权

前端专栏收录该内容

80 篇文章 1 订阅

订阅专栏

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
	.outer{
		width:300px;
		height: 40px;
		background:#eee ;
	}
	.inner{
		width: 0;
		height: 40px;
		background: red;
	}
</style>
</head>
<body>
	<div class="outer">
		<div class="inner" style="width: 0;"></div>
	</div>
	<div class="outer">
		<div class="inner" style="width: 0;"></div>
	</div>
	<div class="outer">
		<div class="inner" style="width: 0;"></div>
	</div>
	<script type="text/javascript">
		var oInner=document.getElementsByClassName("inner")
		function progress(domObj,num){
			var i=0
			var timer=setInterval(function(){
				i++
				domObj.style.width=i+"%"
				if(i==num){
					clearInterval(timer)
				}
			},20)
		}	
		progress(oInner[0],50)
		progress(oInner[1],30)
		progress(oInner[2],10)
	</script>
</body>
</html>