`

进度条

    博客分类：
  • js
js 
阅读更多
单一的进度条 
<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>
分享到：
| input[type=file]文件样式太丑，自定义样式
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

Magicbox
Global site tag (gtag.js) - Google Analytics