<!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>
