js实现进度条

最新推荐文章于 2020-08-07 17:40:35 发布

veiveid

最新推荐文章于 2020-08-07 17:40:35 发布

阅读量349

点赞数

分类专栏： java web前端文章标签： js 进度条

本文链接：https://blog.csdn.net/veiveid/article/details/43793561

版权

web前端同时被 2 个专栏收录

19 篇文章 0 订阅

订阅专栏

java

18 篇文章 0 订阅

订阅专栏

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gbk">
<title>test</title>

<script type="text/javascript" src="jquery-1.11.2.min.js"></script>
<style type="text/css">
	.container{      
		width:450px;     
		border:1px solid #6C9C2C;      
		height:25px;    
	} 
	#bar{      
		background:#95CA0D;      
		float:left;     
		height:100%;      
		text-align:center;      
		line-height:150%;   
	}  
</style>

</head>
<body>
	
	<div class="container">     
		<div id="bar" style="width:0%;"></div>     
	</div>     
	<span id="total"></span>  

</body>
<script type="text/javascript">

function run(){       
	var bar = document.getElementById("bar");          
	var total = document.getElementById("total");      
	bar.style.width=parseInt(bar.style.width) + 1 + "%";       
	total.innerHTML = bar.style.width;      
	if(bar.style.width == "100%"){         
		window.clearTimeout(timeout);        
		return;      
	}      
	var timeout=window.setTimeout("run()",100);    
}  

window.onload = function(){          
	run();     
} 

</script>
</html>

veiveid

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
js实现进度条

test .container{ width:450px; border:1px solid #6C9C2C; height:25px; } #bar{ background:#95CA0D; float:left; height:100%; text-align:ce
复制链接

扫一扫

专栏目录