直播app系统源码,固定速度的进度条显示

直播app系统源码,固定速度的进度条显示实现的相关代码

<style type="text/css">
	#div1{
    
    
		border: 1px solid #666;
		height: 10px;
		width: 200px;
	}
	#div2{
    
    
		width: 0%;
		height: 100%;
		background: red;
	}
</style>
<body>
	<div id="div1">
		<div id="div2">
		</div>
	</div>
</body>
<script type="text/javascript">
	var w = 0;
	setInterval(function(){
    
    
			if(w < 198){
    
    
				w += 1;
				$('#div2').css('width',w);
			}
		},50)
</script>

实现原理:
其实就是两个div , 外面的提供边框,里面的用setInterval()方法来固定时间间隔 使 width以 平均速度 增加,就会达到向进度条那样的效果。
适用场景
可以用在比如做轮播图下面的指示符,当进度条满了之后就换图片,或者其他需要固定速度的进度条的的场景。
以上就是直播app系统源码,固定速度的进度条显示实现的相关代码, 更多内容欢迎关注之后的文章

猜你喜欢

转载自blog.csdn.net/yb1314111/article/details/123684909