效果如图如下:
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>进度条 </title>
</head>
<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>
<script type="text/javascript" src="js/base.js"></script>
<script>
// js不能获取非行内样式的style ,得用getComputedStyle(id名).属性名
// 有兼容问题,在ie中写 id名.currentStyle.属性名
// 兼容性写法: var _width = id名.currentStyle ? id名.currentStyle.属性名 : getComputedStyle("id名").属性名
window.onload = function() {
var filldiv = document.getElementById("filldiv");
var percent = document.getElementById("percent");
var t = setInterval(function() {
//兼容性写法,前者ie,后者其他
var _width = filldiv.currentStyle ? filldiv.currentStyle.width : getComputedStyle(filldiv).width;
filldiv.style.width = parseInt(_width) + 2 + "px";
if(filldiv.style.width == "200px") {
clearInterval(t);
}
percent.innerHTML = parseInt(filldiv.style.width) / 2 + "%";
}, 50)
}
</script>
<body>
<div id="progress">
<div id="filldiv"></div>
<span id="percent">0</span>
</div>
</body>
</html>