请教用JS做进度条

Question

请问如何用js做一个简单的精度条。
比如页面中的一个条形区域，底色是黄的。然后根据给定的数据显示进度，用蓝色表示完成的进度。
给定的数据可以这样假定：每过1秒，进度条完成就10%，10秒后就完成100%，即下载完成。
简单就好，谢谢！

Answer 1

<style>
#otbl {
border: 1px solid #959595;
border-collapse: collapse;
} #otbl td {
width: 40px;
height: 30px;
}
</style>
<table id="otbl">
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
</table>
<span id="pre">0%</span>
<input type="button" value="Start" onclick="processBar();" />
<script type="text/javascript">
<!--
var tbl = document.getElementById('otbl');
//alert(tbl)
var i = 0, timer = null;
function processBar(){
if(i > 9){
clearTimeout(timer);
alert('finish');
}else{
tbl.rows[0].cells[i++].style.backgroundColor = "#FFCC99";
document.getElementById('pre').innerHTML = i * 10 + "%";
timer = setTimeout(processBar, 1000);
}

}
//-->
</script>

Answer 2

<script>
function doPro(dif, speed){
clearTimeout(tid);
var ct = document.getElementById("ct");
var bar = document.getElementById("bar");
var max = parseInt(ct.style.width);
var cur = parseInt(bar.style.width);
if(cur>=max){
bar.style.width = max;
}
else{
cur += max * dif;
bar.style.width = cur;
tid = setTimeout("doPro("+dif+","+speed+")", speed);
}
}var tidwindow.onload=function(){
doPro(0.1, 1000)
}
</script>
<div id="ct" style="background:yellow;width:400px;hight:20px">
<div id="bar" style="background:blue;width:0px;hight:20px">&nbsp;</div>
</div>