摘要：
我很久没有更新我的博客了。我改变了工作环境，很忙。月末，我没有更新一篇文章。文本借用自：http://blog.csdn.net/2004v2004/archive/2008/02/19/2106689.aspx，此功能是在次要基础上通过Javascript实现的。您可以单击上面的按钮来查看进度条的效果。
好久没更新博客了，换了工作环境，比较忙，月底了一篇文章都没有更新。这里简单实现一个功能。Javascript实习进度条。文本借鉴于:http://blog.csdn.net/2004v2004/archive/2008/02/19/2106689.aspx，在次基础上通过Javascript来实现这个功能。欢迎提出意见。
可以通过点击上面的按钮来看进度条的效果。点击此处展开代码：
点击展开
Code<script language="javascript">
function SetPorgressBar(pos)
{
//设置进度条居中
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";
}
</script>
Code<script>
var i=0;
var fun;
function myRefresh()
{
SetPorgressBar(i);
i++;
if(i<100)
{
fun=setTimeout("myRefresh()",100);
}
else
{
SetCompleted();
window.clearTimeout(fun);
alert("加载完成");
i=0;
}
}
window.onload=myRefresh;
</script>
Code<div id="ProgressBarSide" style="position: absolute; height: 100px; 100px; color: Silver;
border- 1px; border-style: Solid; display: none">
<div id="ProgressBar" style=" font-size:larger; position: absolute; height: 100px; 0%; background-color: #3366FF">
</div>
<div id="ProgressText" style="position: absolute; height: 100px; 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