码迷,mamicode.com
首页 > Web开发 > 详细

JS实现进度条效果

时间:2018-01-29 15:53:11      阅读:195      评论:0      收藏:0      [点我收藏+]

标签:height   red   oct   log   highlight   进度   har   分享图片   float   

源代码:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<style type="text/css">
		*{
			margin: 0px auto;
		}
		#wk{
			width: 800px;
			height: 100px;
			border: 1px solid black;
		}
		#zb{
			height: 100px;
			
			background-color: red;
			float: left;
		}
		#yb{
			
			height: 100px;
			background-color: blue;
			float: left;
		}
	</style>
	<body>
		<div id="wk">
			<div id="zb" style="width: 50px;">
				
			</div>
			<div id="yb" style="width: 750px;">
				
			</div>
		</div>
	</body>
	<script type="text/javascript">
		var zb = document.getElementById(‘zb‘);
		var yb = document.getElementById(‘yb‘);
		var w = window.setInterval("Hua()",20);//调用函数,赋给一个变量方便清除调用
	
		function Hua(){
			
			if (parseInt(zb.style.width) == 750 ) {
				window.clearInterval(w);   //清除调用
				return;						//停止函数
			}
			zb.style.width = parseInt(zb.style.width)+4 +"px";
			yb.style.width = parseInt(yb.style.width)-4 +"px";
		
			
		}
	</script>
</html>

  效果如下:

技术分享图片

JS实现进度条效果

标签:height   red   oct   log   highlight   进度   har   分享图片   float   

原文地址:https://www.cnblogs.com/davis16/p/8376080.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!