js代码:
function ProgressBar(bar) { this.bar = bar; this.speed = 50; } ProgressBar.prototype.move = function(moveing, callback) { this.bar.style.width = parseInt(this.bar.style.width) + 1 + "%"; if(this.bar.style.width == "100%"){ window.clearInterval(moveing); if (callback != null) { callback(); } } } ProgressBar.prototype.start = function(callback) { var moveing = window.setInterval(function() { bar.move(moveing, callback); }, this.speed); } ProgressBar.prototype.clear = function() { this.bar.style.width = "1%"; }
进度条代码 页面代码:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE>Progress Bar</TITLE>
<style type="text/css">
#graph{
width:450px;
border:1px solid #F8B3D0;
height:25px;
}
#bar{
display:block;
background:#FFE7F4;
float:left;
height:100%;
text-align:center;
}
</style>
</HEAD>
<BODY>
<div id="graph">
<strong id="bar" style="width:1%;"></strong>
</div>
</BODY>
<SCRIPT type="text/JavaScript" src="html_ProgressBar.js"></SCRIPT>
<SCRIPT type="text/JavaScript">
<!--
function a() {
alert('finish');
}
var bar = new ProgressBar(document.getElementById('bar')); // 构造方法,参数必须填
bar.speed = 20; // 设定间隔时间,非必须
bar.start(a); // a为回调方法,非必须
//-->
</SCRIPT>
</HTML>