2021-09-26

js实现简单进度条效果

css+HTML

//css部分
#box{
	position:relative;
	margin:100px auto;
	width:300px;
	height:30px;
	border:2px solid #666;
}
#range{
	position:absolute;
	/*width: 0px;*/
	height:30px;
	top:0px;
	left:0px;
	background:skyblue;
}
#percent{
	position:absolute;
	left:310px;
	top:0;
}

//html部分
<div id="box">
	<p id="range"></p>
	<span id="percent"></span>
</div>

js

<script>
	//获取需要用到的元素
	var box = document.getElementById("box");
	var range = document.getElementById("range");
	var percent = document.getElementById("percent");
	
	//创建一个定时器
	var time = setInterval(function(){
		//使range部分的宽度每次增加2px
		range.style.width = range.clientWidth + 2 + "px";
		
		//清除定时器
		if(range.clientWidth >= 300){
			clearInterval(time);
		}
		
		//得到进度的百分比
		var num = parseInt((range.clientWidth / box.clientWidth)*100) + "%";
		percent.innerHTML = num;
	},20);
</script>