进度条

最新推荐文章于 2025-01-08 08:22:07 发布

原创最新推荐文章于 2025-01-08 08:22:07 发布 · 164 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#js #ViewUI

js 专栏收录该内容

5 篇文章

订阅专栏

单一的进度条


<html xmlns="http://www.w3.org/1999/xhtml" > 
<head> 
<script src="jquery-1.7.1.js"></script>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>进度条</title> 
<style type="text/css"> 
.graph{ 
width:150px; 
border:1px ridge silver; 
border-radius:20px;
height:10px; 
} 
.bar{ 
display:block; 
background:highlight; 
float:left; 
height:100%; 
border-radius:20px;
text-align:center; 
} 
</style> 
<script type="text/javascript"> 
var barInterval;
function go(){ 
	var yWidth=$("#bar1").css("width");
	var ywIndex=yWidth.indexOf('px');
	yw=yWidth.substring(0,ywIndex);
	yw=parseInt(yw)+1;
	$("#bar1").css("width",yw+"px");
	if($("#bar1").css("width")=='150px'){ 
		window.clearInterval(barInterval); 
	} 
}
function jdt(){
		barInterval=window.setInterval("go()",30); 
}

function tt(){
	jdt();
}
</script> 
</head> 
<body> 
	<div class="graph"> 
		<strong id="bar1" name='bar' style="width:0px;" class='bar'></strong> 
	</div> 
<button onclick="tt()">开始</button>
</body> 
</html>

单一的进度条


<html xmlns="http://www.w3.org/1999/xhtml" > 
<head> 
<script src="jquery-1.7.1.js"></script>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>进度条</title> 
<style type="text/css"> 
.graph{ 
width:150px; 
border:1px ridge silver; 
border-radius:20px;
height:10px; 
} 
.bar{ 
display:block; 
background:highlight; 
float:left; 
height:100%; 
border-radius:20px;
text-align:center; 
} 
</style> 
<script type="text/javascript"> 
var barList={};
function go(barId){ 
	var yWidth=$("#"+barId).css("width");
	var ywIndex=yWidth.indexOf('px');
	yw=yWidth.substring(0,ywIndex);
	yw=parseInt(yw)+1;
	$("#"+barId).css("width",yw+"px");
	if($("#"+barId).css("width")=='150px'){ 
		window.clearInterval(barList[barId]); 
	} 
}
function jdt(){
	var _bars=$("strong[name='bar']");
	$(_bars).each(function(i,_bar){
		var barId=$(_bar).attr('id');
		barList[barId]=window.setInterval("go('"+barId+"')",30); 
	});
}

function tt(){
	jdt();
}
</script> 
</head> 
<body> 
	<div class="graph"> 
		<strong id="bar1" name='bar' style="width:0px;" class='bar'></strong> 
	</div> 
	<div style='height:35px;'>
		<hr>
	</div>
	<div class="graph"> 
		<strong id="bar2" name='bar' style="width:0px;" class='bar'></strong> 
	</div> 
<button onclick="tt()">开始</button>
</body> 
</html>