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>
接著我們來看一下效果
我先把這這個(gè)背景改了一下，先有個(gè)效果，一會(huì)寫的時(shí)候，把子盒子里面的背景寬改成0就可以了
我們接著寫一下js代碼，說一下邏輯，
1肯定是先用定時(shí)器去操作，
2當(dāng)?shù)竭_(dá)400px時(shí)候，讓定時(shí)器停止，就這么簡(jiǎn)單。我們先獲取一下but和div，因?yàn)橐obut一個(gè)點(diǎn)擊事件，接著定義一個(gè)自增，之后我們直接寫出定時(shí)器，然后給定時(shí)器定義1秒一自增。在里面也別忘了給寬遞增。
黃顏色的盒子會(huì)自己往前運(yùn)動(dòng)，他不會(huì)停住，而且數(shù)字也沒變化。而且還有一種情況就是，用戶還會(huì)多次點(diǎn)擊按鈕，所以我們也不能讓用戶每一次點(diǎn)擊，都去重新的加載。
我們加一個(gè)判斷，如果num增加到400，就不讓他繼續(xù)增加了。
解決用戶連續(xù)點(diǎn)擊，就是在最外層加一個(gè)判斷，在讓定時(shí)器停止時(shí)，給setInterval一個(gè)名字，在最外層，加一個(gè)判斷，
值的改變就更好辦了，直接將給span重新賦值就可以了，但是切記，這里要給一個(gè)取整。
<script>//邏輯：1.利用定時(shí)器來進(jìn)行遞增操作（width，百分?jǐn)?shù)）//當(dāng)變量 當(dāng)?shù)?00px的時(shí)候，要停止定時(shí)器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) {//定時(shí)器timer = setInterval(() => {num += 10;//給寬進(jìn)行遞增div[1].style.width = num + 'px';//給百分比遞增span[0].innerText = Math.ceil(num/400*100);if (num == 400) {clearInterval(timer);}}, 100);}}</script>總結(jié)
