进度条

最新推荐文章于 2025-11-24 02:17:16 发布

最新推荐文章于 2025-11-24 02:17:16 发布 · 115 阅读

文章标签：

#javascript #ViewUI

JavaScript 专栏收录该内容

15 篇文章

订阅专栏

本文介绍了一种使用HTML、CSS及JavaScript实现动态加载进度条的方法。通过设置内联样式和利用JavaScript定时更新进度条宽度来展示百分比进度，适用于网页应用中任务执行状态的实时反馈。

<html>
<head>
<title>进度条</title>
</head>
<style type="text/css">
#per { BORDER-TOP: white 2px inset;
BORDER-RIGHT: white 2px inset;
BORDER-LEFT: white 2px inset;
BORDER-BOTTOM: white 2px inset;
BACKGROUND: white;
HEIGHT: 10px;
WIDTH: 200px;
}
#perr{ WIDTH: 0%;
HEIGHT: 6px;
}
#perrr{ FONT-SIZE: 1px;
BACKGROUND: highlight;
WIDTH: 100%;
HEIGHT: 100%
}
</style>
<script language="javascript">
i=0;
function start(){
ba=setInterval("begin()",100);//setInterval 返回的是一个全局变量，一个间隔数值.这个数值是表示调用setInterval的次数
}
function begin(){
i+=1;
if(i<=100){
document.getElementById("perr").style.width=i+"%";
document.getElementById("perF1").innerHTML=i+"%";
}
}
</script>

<body onload="start();" >
<table border=0>
<tr>
<td><div id=per><div id=perr><div id=perrr></div></div></div></td>
<td><div id="perF1">0%</div></td>
</tr>
</table>
</body>
</html>