⏰
指定した数字までカウントアップ
データ表示のカウントアップアニメーションで使えそうなやつです。
htmlでは初期値で0を指定しておき、data-numの数字までカウントアップするようにしています。
<div class="number" data-num="2022.2">0</div>
JavaScriptは指定した数字までsetIntervalでカウントアップ。小数点以下はランダムで適当に数字をシャッフルしてます。
指定した数値に達したら、data-numの数字を入れてます。
const shuffleNumberCounter = (target) => {
const targetNum = Number(target.getAttribute('data-num'))
if (!targetNum) {
return
}
let counterData = null
const speed = 800 / targetNum
let initNum = 0
const countUp = () => {
if (Number.isInteger(targetNum)) {
target.innerHTML = initNum
} else {
target.innerHTML = `${initNum}.${Math.floor(Math.random() * 9)}`
}
initNum++
if (initNum > targetNum) {
target.innerHTML = targetNum
clearInterval(counterData)
}
}
counterData = setInterval(countUp, speed)
}
const target = document.querySelector('.number');
shuffleNumberCounter(target)
Discussion