html进度条

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>

猜你喜欢