javascript实现用符号制作进度条实例

如图所示：

这里暂时不考虑页面布局等方面，纯进度条加载的实现。

具体代码如下：

<p style="text-align:center;"> 页面载入中，请稍后...</p>
<form name="loading">
<input type="text" name="progress" size="46" style=" font-family:Arial, Helvetica,
 sans-serif;font-weight:bolder; border-style:none; padding:0px;" />
<br />
<br />
<input type="text" name="per" size="36" style="font-weight:bolder; border-style:none; padding:0;" />
</form>
<script type="text/javascript">
var bar=0; //进度条的进度
var line="||"; //类似进度条的符号 双竖线
var typeline="||";
count();
function count(){
 bar =bar+2;  //进度条+2
 typeline=typeline+line; //符号随着增加
 document.loading.progress.value=typeline; //显示进度条符号
 document.loading.per.value=bar+"%"; //显示进度百分比
 if(bar<100){  //判断进度条是否到头
 setTimeout("count()",100); //设置定时 每隔100ms
 
 }else{
 
 window.location="#"; //进度条到头后事件处理
 }
 
 
}

</script>

此进度条为使用符号（||）呈现进度条的不断变化，此例重点是进度条的布局，此例可用于很普通的页面加载，无法计算真正的加载时间。
IT技术资料分享-个人整理自互联网