js实现进度条的运转

m0_63514794

于 2022-08-10 20:29:27 发布

阅读量93

点赞数

文章标签： javascript html css

本文链接：https://blog.csdn.net/m0_63514794/article/details/126273879

版权

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<style>
		#first {
			width: 520px;
			margin: 20px auto;
			height: 30px;
			border: 1px solid black;
			position: relative;
			border-radius: 10px;
			overflow: hidden;
			background-color: gainsboro;
		}
		#second {
			background-color: red;
			width: 10px;
			height: 30px;
			position: absolute;
			text-align: right;
			line-height: 30px;
			color: white;
		}
	</style>
	<body>
		<div id="first">
			<div id="second"><span id="third">0</span>%</div>
		</div>
		<script>
				var _second= document.getElementById("second");
				var _third=document.getElementById("third");
				var i = 0;
				var id = setInterval(frame, 100);
				function frame() {
					if (i == 100) {
						clearInterval(id);
						_second.innerHTML="加载已完成";
					} else {
						i++;
						_third.innerText=i;
						_second.style.width = i + '%';
					}
				}
		</script>
	</body>
</html>