JavaScript进度条设计源码实例_进度条源码设计-优快云博客

本文链接：https://blog.youkuaiyun.com/softwave/article/details/2093573

本文提供了三种使用HTML和JavaScript实现进度条的方法。第一种方法通过更改宽度属性来更新进度百分比，第二种方法则同时显示文本信息，第三种方法适用于IE浏览器，并提供动态效果。这些示例代码可以帮助开发者快速实现网页加载进度的可视化。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

点击这里使用RSS订阅本Blog： rel="alternate" href="http://feed.feedsky.com/softwave" type="application/rss+xml" title="RSS 2.0" />

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】