js实现简单的进度条效果

下面用js实现一个简单的进度条从0%逐渐增加到100%的效果。

css部分

*{
	margin:0;
	padding:0;
}
#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");
	
	//创建一个定时器，让里面的函数每隔20毫秒自动执行一次
	var time = setInterval(function(){
		//使range部分的宽度每次增加2px
		range.style.width = range.clientWidth + 2 + "px";
		
		//当宽度达到和外部盒子宽度一致时，清除定时器
		if(range.clientWidth >= 300){
			clearInterval(time);
		}
		
		//通过range的宽度和外部盒子宽度的数值比，得到进度的百分比
		var num = parseInt((range.clientWidth / box.clientWidth)*100) + "%";
		percent.innerHTML = num;
	},20);
</script>