指定した数字までカウントアップ

データ表示のカウントアップアニメーションで使えそうなやつです。

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)