方法1，js进度条代码。
复制代码 代码示例:
<!doctype html public "-//w3c//dtd html 4.0 transitional//en">
<html>
<head>
<title>js进度条_www.yuju100.com</title>
<meta name="generator" content="editplus">
<meta name="author" content="">
<meta name="keywords" content="text/html">
<meta name="description" content="有关windows中进度条的实现">
<style type="text/css">
#out{width:300px;height:20px;background:#eee;}
#in{width:10px; height:20px;background:#778899;color:white;text-align:center;}
#font_color{background:yellow;text-align:center;color:white;}
</style>
</head>
<body onload="start();" >
<div id='out'>
<div id="in" style="width:10%">10%</div>
<div>
<script type="text/
javascript">
i=0;
function start()
{
ba=setinterval("begin()",100);//setinterval 返回的是一个
全局变量，一个间隔数值.这个数值是表示调用setinterval的次数
}
function begin()
{
i+=1;
if(i<=100)
{
document.getelementbyid("in").style.width=i+"%";
document.getelementbyid("in").innerhtml=i+"%";}
else
{
clearinterval(ba);
document.getelementbyid("out").style.display="none";
document.write("<span style='background:yellow;text-align:center;color:white;'>加载成功</span>");
}
}
</script>
</body>
</html>
方法二，js进度条。
复制代码 代码示例:
<!doctype html public "-//w3c//dtd html 4.0 transitional//en">
<html>
<head>
<title>js进度条_www.yuju100.com</title>
<meta name="generator" content="editplus">
<meta name="author" content="">
<meta name="keywords" content="text/html">
<meta name="description" content="有关windows中进度条的实现">
<style type="text/css">
#out{width:300px;height:20px;background:#ccc; position:relative}
#in{width:10px; height:20px;background:#03f;color:white;text-align:center;overflow:hidden;}
#in_0{text-align:center; width:300px; font-weight:bold; height:20px;
line-height:20px; position:absolute; z-index:-1;}
#in_1{text-align:center; width:300px; font-weight:bold; height:20px; line-height:20px; color:#fff;}
#font_color{background:yellow;text-align:center;color:white;}
</style>
</head>
<body onload="start();" >
<div id='out'>
<div id="in_0">已加载10%</div>
<div id="in" style="width:10%"><div id="in_1"></div></div>
<div>
<script type="text/javascript">
i=0;
function start()
{
ba=setinterval("begin()",100);//setinterval 返回的是一个全局变量，一个间隔数值.这个数值是表示调用setinterval的次数
}
function begin()
{
i+=1;
if(i<=100)
{
document.getelementbyid("in").style.width=i+"%";
document.getelementbyid("in_0").innerhtml= document.getelementbyid("in_1").innerhtml="已加载"+i+"%";}
else
{
clearinterval(ba);
document.getelementbyid("out").style.display="none";
document.write("<span style='background:yellow;text-align:center;color:white;'>加载成功</span>");
}
}
</script>
</body>
</html>
3、ff下调试未通过，可能不兼容ie外浏览器。
复制代码 代码示例:
<style>
#load{width:500px;height:25px;border:1px #000 solid;}
#loading{position:absolute;z-index:2;height:23;filter:progid:dximagetransform.microsoft.gradient(gradienttype=1,startcolorstr=white,endcolorstr=#39867b);}
#loadtext{position:absolute;z-index:3;width:100%;height:100%;line-height:23px;text-align:center;}
</style>
<div id="load"><div id="loading"></div><div id="loadtext">1%</div></div>
<script>
var i=0;
function test(){
i++;
document.getelementbyid("loading").style.width = i + "%";
document.getelementbyid("loadtext").innertext = i + "%";
if(i<100)settimeout("test()",200);
}
settimeout("test()",200);
</script>
