我想在 x 秒內顯示一個從 0 到最大值 y 的影片數字。我已經嘗試了以下代碼，但完成和清除間隔需要太多時間。
jQuery('.numbers').each(function(item, index) {
const $obj = jQuery(this);
let objValue = parseInt($obj.text()),
currentValue = 0,
speed = 1,
time = 4000,
step = Math.floor(objValue / time);
$obj.text(currentValue);
let interVal = setInterval(() => {
if (currentValue >= objValue) {
clearInterval(interVal);
$obj.text(objValue);
}
$obj.text(currentValue);
currentValue = step
}, speed);
});<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<span class='numbers'>7586</span>
<span class='numbers'>147520</span>如何在time幾秒鐘內播放此影片？
uj5u.com熱心網友回復：
最好不要依賴 的時間setInterval()，但腳本中的真正問題是您使用底值來決定要列印的新值。
最好使用Window.requestAnimationFrame()并創建一個update()根據實際經過的時間列印當前數字的函式。
let start, previousTimeStamp;
let numbers = document.querySelectorAll('.numbers');
requestAnimationFrame(update);
function update(timestamp) {
if (start === undefined) {
start = timestamp;
}
const elapsed = timestamp - start;
[...numbers].forEach(elm => {
if(!elm.dataset.start){
elm.dataset.start = elm.textContent;
}
let start = parseInt(elm.dataset.start);
elm.textContent = Math.floor(start / 4000 * elapsed);
});
if (elapsed < 4000) {
previousTimeStamp = timestamp;
requestAnimationFrame(update);
}else {
start = undefined;
[...numbers].forEach(elm => {
elm.textContent = elm.dataset.start;
});
}
}<span class='numbers'>7586</span>
<span class='numbers'>147520</span>轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/493992.html
標籤：javascript 表现 设置间隔
上一篇：加速if-else階梯C