<div class="container">
  <p id="count" data-from="0" data-to="4096">0</p>
  <button id="button">Start!</button>
</div>

setInterval에서 개수

const DURATION = 3600
const el = {
  count: document.getElementById('count'),
  button: document.getElementById('button')
}

el.button.addEventListener('click', e => {
  const from = parseInt(el.count.dataset.from, 10)
  const to = parseInt(el.count.dataset.to, 10)
  const startTime = Date.now()

  const timer = setInterval(() => {
    const elapsedTime = Date.now() - startTime
    const progress = elapsedTime / DURATION

    if (progress < 1) {
      el.count.textContent = Math.floor(from + progress * (to - from))
    } else {
      el.count.textContent = to
      clearInterval(timer)
    }
  }, 16)
})

동작이 완급하다.

setInterval의 동작은 비교적 단조롭기 때문에 완급에 주의해야 한다p>

애니메이션을 느리게 하려면 Tween계의 프로그램 라이브러리를 사용해서 효과적일 것 같아서 이번에 선택했습니다TweenMaxp>

TweenMax는 원소 속성뿐만 아니라 일반 대상에도 사용할 수 있기 때문에 숫자 계수에 적용됩니다.왕 씨 어르신 덕분에 나는 비로소 완급해졌고, 내 피가 이미 해를 넘긴 것 같았다p>
이 예에서 저는 InOut 계열의 Eding을 선택했습니다. 여러분께 보여드리려면 Out 계열의 Eding이 좋을 것 같습니다.p>

const DURATION = 3.6
const el = {
  count: document.getElementById('count'),
  button: document.getElementById('button')
}

el.button.addEventListener('click', e => {
  const from = parseInt(el.count.dataset.from, 10)
  const to = parseInt(el.count.dataset.to, 10)
  let obj = {count: from}

  TweenMax.to(obj, DURATION, {
    count: to,
    ease: Power3.easeInOut,
    onUpdate: () => {
      el.count.textContent = Math.floor(obj.count)
    }
  })
})

See the Pen CountUp Animation TweenMax by noplan1989 ( @noplan1989 ) on CodePen .

<!-- Google Fontsから読み込み-->
<link href="https://fonts.googleapis.com/css?family=Roboto+Mono" rel="stylesheet">

.count {
  font-family: 'Roboto Mono', monospace;
}