js--进度条 

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			#progress{
				position: relative;
				margin: auto;
				top: 200px;
				display: block;
				width: 200px;
				height: 20px;
				border-style: dotted;
				border-width: thin;
				border-color: darkgreen;
			}
			#filldiv{
				position: absolute;
				top: 0px;
				left: 0px;
				width: 0px;
				height: 20px;
				background: blue;
			}
			#percent{
				position: absolute;
				top: 0px;
				left: 200px;
			}
		</style>
	</head>
	<body>
		<div id="progress">
			<div id="filldiv"></div>
			<span id="percent">0</span>
		</div>
	</body>
</html>
<script src="common.js"></script>
<script>
	window.onload = function(){
		var fillDiv = $id("filldiv");
		var per = $id("percent");
		var timer = setInterval(function(){
			//改变div的宽度
			fillDiv.style.width = fillDiv.offsetWidth + 2 +"px";
			fillDiv.style.backgroundColor = getColor();
			//改变宽度的进度比例
			per.innerHTML = parseInt(100*fillDiv.offsetWidth/200) + "%";
			//判断fillDiv的宽度如果为200 就停止定时器
			if(fillDiv.offsetWidth == 200){
				clearInterval(timer)
			}
		},30)
	}
</script>

　　

posted @ 2019-08-11 14:50  Yi只猴  阅读(114)  评论(0)    收藏  举报