首页 > Web开发 > 详细

JS实现进度条效果

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

源代码:

<!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实现进度条效果

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

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!