JavaScript进度条设计源码实例

来源：互联网发布：南京世纪桥软件编辑：程序博客网时间：2024/05/16 07:09

点击这里使用RSS订阅本Blog：

JavaScript进度条设计源码实例

几种方案
1.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">

<HTML>

<HEAD>

#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>

<div>

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>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">

<HTML>

<HEAD>

#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>

<div>

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>

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>

以上，摘编自【http://bbs.blueidea.com/thread-2816041-1-1.html】