JavaScript进度条设计源码实例

Windows进度条实现

最新推荐文章于 2025-06-25 14:52:27 发布

最新推荐文章于 2025-06-25 14:52:27 发布 · 111 阅读

文章标签：

#JavaScript #HTML #ViewUI

java 专栏收录该内容

37 篇文章

订阅专栏

本文介绍了一个简单的HTML和JavaScript实现的动态进度条案例。通过设置定时器来更新进度条的宽度和显示百分比，最终完成加载过程并显示加载成功提示。

[img]http://dl.iteye.com/upload/attachment/244456/51408f48-4a3d-3bbd-9a12-13c60454627a.jpg[/img]

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE> 进度条 </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>