<div class="number" data-num="2022.2">0</div>

body {
  display: flex;
  width: 100vw;
  height: 100vh;
  align-items: center;
  justify-content: center;
  background: #24A19C;
}

div {
  font-size: 120px;
  font-weight: bold;
  color: #325288;
}

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)