再看代码就简答多了
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<style type="text/css">
* {
padding: 0;
margin: 0;
}
.process-parent {
position: absolute;
width: 400px;
border: 1px solid #ccc;
height: 10px;
border-radius: 3px;
}
.process-son {
position: relative;
background: #ff0000;
height: 100%;
font-size: 8px;
text-align: center;
color: #fff;
}
</style>
<body>
<div class="process-parent">
<div class="process-son" id="bar" style="width: 0%;">
</div>
</div>
</body>
<script type="text/javascript">
function run() {
var bar = document.getElementById("bar");
bar.style.width = parseInt(bar.style.width) + 1 + "%";
bar.innerText = bar.style.width;
if (bar.style.width == "100%") {
clearTimeout(timeout);
return;
}
var timeout = setTimeout('run()', 300);
}
window.onload = run();
</script>
</html>
想把这块代码简化下，html这边，只需要给定宽和高固定的div，js这边提供一个方法，参数为标签id，时间间隔以及每次间隔增加的百分比。