JavaScript实现简单进度条

function SetPorgressBar(pos)
{
//debugger;
//设置进度条居中
var screenHeight = document.body.offsetHeight;
var screenWidth =document.body.offsetWidth;
ProgressBarSide.style.width = Math.round(screenWidth / 2);
ProgressBarSide.style.left = Math.round(screenWidth / 4);
ProgressBarSide.style.top = Math.round(screenHeight / 2);
ProgressBarSide.style.height = "100px";
ProgressBarSide.style.display = "";

//设置进度条百分比
ProgressBar.style.width = pos + "%";
ProgressText.innerHTML = pos + "%";
}
//完成后隐藏进度条
function SetCompleted()
{
ProgressBarSide.style.display = "none";
}

好久没更新博客了，换了工作环境，比较忙，月底了一篇文章都没有更新。这里简单实现一个功能。Javascript实习进度条。文本借鉴于:http://blog.csdn.net/2004v2004/archive/2008/02/19/2106689.aspx，在次基础上通过Javascript来实现这个功能。欢迎提出意见。
可以通过点击上面的按钮来看进度条的效果。点击此处展开代码：点击展开

Code
<div id="ProgressBarSide" style="position: absolute; height: 100px; width: 100px; color: Silver;
border-width: 1px; border-style: Solid; display: none">
<div id="ProgressBar" style=" font-size:larger; position: absolute; height: 100px; width: 0%; background-color: #3366FF">
</div>
<div id="ProgressText" style="position: absolute; height: 100px; width: 100%;text-align:center; font-size:80px;">
qqqq
</div>
</div>
<div>
<input onclick="javascript:myRefresh();" type="button" value="重新加载进度条"></div>
<div>
<input onclick="javascript:window.location.reload();" type="button" value="重新加载页面">
</div>

Best Regards,
Charles Chen
msn: gotosunny@msn.com

var i=0;
var fun;
function myRefresh()
{
SetPorgressBar(i);
i++;
if(i<100)
{
document.getElementById("progress1").disabled=true;
document.getElementById("progress2").disabled=true;
fun=setTimeout("myRefresh()",100);
}
else
{
SetCompleted();
window.clearTimeout(fun);
alert("加载完成");
document.getElementById("progress1").disabled=false;
document.getElementById("progress2").disabled=false;
i=0;
}
}
window.onload=myRefresh;