直播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系统源码，固定速度的进度条显示实现的相关代码， 更多内容欢迎关注之后的文章

 

posted @ 2022-03-23 14:12  云豹科技-苏凌霄  阅读(54)  评论(0)    收藏  举报