欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识！
您现在的位置是： 首页

html进度条 博客分类： html

程序员文章站 2024-03-21 21:25:52
...

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>

 

 

 

 

 

上一篇： LVS十种调度算法 博客分类： linux  

下一篇： 深入浅出之正则表达式（一） 博客分类： 工具技巧

推荐阅读