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

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>

此进度条为使用符号（||）呈现进度条的不断变化，此例重点是进度条的布局，此例可用于很普通的页面加载，无法计算真正的加载时间。