js进度条功能
<body><div class="fa"><div class="son"><span>0</span><span>%</span></div></div><button id = 'but'>安裝</button>
</body><style>.fa {width: 400px;margin-bottom: 30px;border: 1px solid red;}.son {width: 100px;height: 40px;background-color: rgb(231, 234, 39);text-align: center;line-height: 40px;}</style>
接著我們來看一下效果
我先把這這個背景改了一下，先有個效果，一會寫的時候，把子盒子里面的背景寬改成0就可以了
我們接著寫一下js代碼，說一下邏輯，
1肯定是先用定時器去操作，
2當到達400px時候，讓定時器停止，就這么簡單。我們先獲取一下but和div，因為要給but一個點擊事件，接著定義一個自增，之后我們直接寫出定時器，然后給定時器定義1秒一自增。在里面也別忘了給寬遞增。
黃顏色的盒子會自己往前運動，他不會停住，而且數字也沒變化。而且還有一種情況就是，用戶還會多次點擊按鈕，所以我們也不能讓用戶每一次點擊，都去重新的加載。
我們加一個判斷，如果num增加到400，就不讓他繼續增加了。
解決用戶連續點擊，就是在最外層加一個判斷，在讓定時器停止時，給setInterval一個名字，在最外層，加一個判斷，
值的改變就更好辦了，直接將給span重新賦值就可以了，但是切記，這里要給一個取整。
<script>//邏輯：1.利用定時器來進行遞增操作（width，百分數）//當變量 當到400px的時候，要停止定時器let but = document.getElementById('but');let div = document.getElementsByTagName('div');let span = document.getElementsByTagName('span');let timer = nullbut.onclick = function () {let num = 0;if (timer == null) {//定時器timer = setInterval(() => {num += 10;//給寬進行遞增div[1].style.width = num + 'px';//給百分比遞增span[0].innerText = Math.ceil(num/400*100);if (num == 400) {clearInterval(timer);}}, 100);}}</script>總結
