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

html进度条 博客分类： html

程序员文章站 2024-03-21 21:26:10
...

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>

 

 

 

 

 

上一篇： 【ElasticSearch基础知识简介】 博客分类： 大数据--ElasticSearch ElasticSearch基础知识简介 

下一篇： 【java之Undertow介绍】 博客分类： Undertow 【java之Undertow介绍】 

推荐阅读