JS实现进度条效果

Posted Davis16

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了JS实现进度条效果相关的知识,希望对你有一定的参考价值。

源代码:

<!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实现进度条效果的主要内容,如果未能解决你的问题,请参考以下文章

用jquery实现进度条效果

JS实现进度条效果

js 代码实现视频进度条点到哪个位置就播放那个位置的视频。进度条是用css样式另做的。

JS实例之进度条制作,实现进度条读条效果

java 做进度条 ajax实现 js jquery ext 都可以需要具体实现过程和代码 需要读取数据

简单实用的进度条加载组件loader.js