我想從 0 開始。直到它到達數字 709 和 54，停止它。
HTML
<span class="card-title h5 counter"> 709 </span>
<span class="card-title h5 counter"> 54 </span>
腳本.js
let intervals = [];
let counter = [];
let elements = document.getElementsByClassName('counter');
Array.from(elements).forEach((element, index) => {
counter[index] = 0;
intervals[index] = setInterval(()=> {
counter[index] ;
element.innerText=counter;
}
, 50);
})
但是這段代碼無限期地繼續下去并且不會結束。
uj5u.com熱心網友回復：
這邊走...
setInterval兩者都使用相同的值，并在沒有更多計數器遞增時將其清除。
const elements = [...document.querySelectorAll('.counter')].map(el=>({el,counter:parseInt(el.textContent), val:-1}))
let intervalReference = setInterval(() =>
{
let endingCount = 0
elements.forEach(refs =>
{
if ( refs.val < refs.counter)
refs.el.textContent = ` ${ refs.val} `
else
endingCount
})
if (endingCount===elements.length) clearInterval(intervalReference)
}, 50) <span class="card-title h5 counter"> 709 </span>
<span class="card-title h5 counter"> 54 </span>uj5u.com熱心網友回復：
您可以使用下面的代碼片段，setInterval 可以在 clearInterval 的幫助下停止。
var intervalId = null;
var varCounter = 0;
var varName = function(){
if(varCounter <= 709) {
varCounter ;
/* your code goes here */
} else {
clearInterval(intervalId);
}
};
$(document).ready(function(){
intervalId = setInterval(varName, 10000);
});
uj5u.com熱心網友回復：
您也可以在兩個單獨的setInterval()呼叫中執行此操作。每一個都是在自己的范圍內定義的。這樣就不需要設定陣列來存盤范圍之外的值和參考：
[...document.querySelectorAll('.counter')]
.forEach(e=>{ let i=0;
const n=parseInt(e.textContent),
h=setInterval(()=>{
if(i<n) e.textContent= i " ";
else clearInterval(h);
},20)
});<span class="card-title h5 counter"> 709 </span>
<span class="card-title h5 counter"> 54 </span>轉載請註明出處，本文鏈接：https://www.uj5u.com/qianduan/408012.html
標籤：