今天我們來學習一下，用JS來實現簡單的進度條效果
首先我們先來到HTML部分

<div class="box1"></div>

css部分

.box1{width:500px;//先設置寬高height:200px;background-color: aqua;border-radius: 100px 100px 100px 100px;

接下來就到了咱們的重點部分，JS，咱們用JS來寫，首先要想到的是應該怎么樣去實現這個簡單的進度條效果呢？
相信大家都接觸過類似的進度條，進度條可以往前加，也可以往后減，怎么用就看大家應用在什么方面了。咱們可以先拿到div的寬度，加上一個定時器,然后讓他自減，這樣就可以實現一個簡單的進度條效果了。

var sty= document.querySelector(".box");var kd=sty.offsetWidth;var timer= setInterval(function(){kd-=10;sty.style.width=kd+'px';if(kd<=0){clearInterval(timer);}},100);

總結

以上是生活随笔為你收集整理的JS简单实现进度条效果的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。