直播app系統原始碼，固定速度的進度條顯示

zhibo系統開發發表於2022-03-23
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系統原始碼，固定速度的進度條顯示實現的相關程式碼， 更多內容歡迎關注之後的文章


來自 “ ITPUB部落格 ” ，連結：http://blog.itpub.net/69978258/viewspace-2883535/，如需轉載，請註明出處，否則將追究法律責任。

相關文章