例子,js进度的实例代码,有演示截图。
演示图:
代码:
<body>
<center>
<script language="javascript" type="text/javascript">
//设定进度条横坐标到屏幕中央
var bar_x_i=screen.width/2-153;
//设定进度条纵坐标到屏幕中央
var bar_y_i=screen.height/2-50;
//将读取进度初始值设定为0
var percent_i=0;
//定义关闭进度显示窗口函数
function closebar()
{
//关闭进度显示窗口
document.all('bar').style.visibility='hidden';
}
//定义显示进度条函数
function loadbar(text_str,plus_i,finished)
{
//判断是否读取完毕
if (finished)
{
//显示“读取完毕”
document.all('bar_title').innerText=text_str;
//暂停5秒钟,然后关闭
setTimeout('closebar()',5000);
}
else
{
//增加载入百分比
percent_i+=plus_i;
//增加进度条长度
for (var i=0,percent_s='';i<percent_i;i++)
percent_s+='|';
//显示进度条
document.all('bar_load').innerText=percent_s;
//显示提示文字
document.all('bar_title').innerText=text_str+' '+percent_i+'%';
}
}
//读取进度窗口
var loadtable=""
loadtable+="<table id='bar' border='2' cellspacing='0' bordercolor='#39435E' bgcolor='#FFFFFF' width='308' height='20' style='position:absolute; top:expression(bar_y_i); left:expression(bar_x_i); font-family:宋体; font-size:9pt'>";
loadtable+="<tr><td height='12'>";
loadtable+="<div id='bar_title'>正在读取网页......</div>";
loadtable+="</td></tr><tr><td bgcolor=#3366CC height=8>";
loadtable+="<div id='bar_load' style='font-family:Arial; font-size:5pt;'>||</div>";
loadtable+="</td></tr></table>";
document.write (loadtable);
</script>
<script>loadbar('正在读取网页正文......',20,false);</script>
以下是您的网页正文………………<br>
………………………………………<br><br>
<script>loadbar('正在读取网页脚本......',20,false);</script>
这里是您的网页脚本………………<br>
………………………………………<br><br>
<script>loadbar('随便写些什么..........',20,false);</script>
这里是您的网页五分之二部分……<br>
………………………………………<br><br>
<script>loadbar('随便写些什么..........',20,false);</script>
这里是您的网页五分之三部分……<br>
………………………………………<br><br>
<script>loadbar('正在下载图片信息......',20,false);</script>
这里是您的网页五分之四部分……<br>
………………………………………<br><br>
<script>loadbar('读取完毕!正在初始化......',0,true);</script>
</center>
</body>