`
davepkxxx
  • 浏览: 40293 次
  • 性别: Icon_minigender_1
  • 来自: 深圳
社区版块
存档分类
最新评论

JavaScrpit简易进度条,进度条100%后可以执行回调方法。

阅读更多
进度条js:ProgressBar.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="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>
分享到:
评论

相关推荐

Global site tag (gtag.js) - Google Analytics