DOM-进度条

最新推荐文章于 2024-09-14 19:44:09 发布

Youser511

最新推荐文章于 2024-09-14 19:44:09 发布

阅读量122

点赞数

分类专栏：学习

本文链接：https://blog.csdn.net/qq_45025670/article/details/125810718

版权

javascript 前端

学习专栏收录该内容

92 篇文章 1 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style type="text/css">
	</style>
</head>
<body>
	<div id="div1" style="height:50px;border:1px solid #ccc">
		<div id="div2" style="background: blue;height: 50px"></div>
	</div>
	<span id="sp"></span>
</body>
<script type="text/javascript">
	var div1 = document.getElementById('div1');
	var div2 = document.getElementById('div2');
	var start = 0;
	var end = 500;
	div1.style.width=end+"px";
	div2.style.width=start+"px";
	var timer = setInterval(function(){
		div2.style.width=parseInt(div2.style.width) + 1 +"px";

		//toFixed指定两个小数
		sp.innerHTML=(100*(parseInt(div2.style.width)/end)).toFixed(2)+"%";

		if(parseInt(div2.style.width)==end){
			clearInterval(timer);
			alert("加载完成");
		}
	},10);
</script>
</html>