HTML구조 (예제)

<span>

  TODAY : <span id="today-count" data-count="<?php echo $visit[1] ?>">0</span> /

  TOTAL : <h4><span id="total-count" data-count="<?php echo $visit[4] ?>">0</span></h4>

</span>

적용하고싶은곳에

data-count를 추가하여 넣으면 동작합니다.

0은 처음 실행시 기본값숫자입니다.

스크립트

<script>

  function animateCounter(id, target) {

    const el = document.getElementById(id);

    let count = 0;

    const speed = Math.ceil(target / 100); // 시간 조절

    const interval = setInterval(() => {

      count += speed;

      if (count >= target) {

        count = target;

        clearInterval(interval);

      }

      el.textContent = count;

    }, 20); // 속도 조절 가능

  }

  window.onload = () => {

    const todayTarget = parseInt(document.getElementById('today-count').dataset.count);

    const totalTarget = parseInt(document.getElementById('total-count').dataset.count);

    animateCounter('today-count', todayTarget);

    animateCounter('total-count', totalTarget);

  };

</script>

예제는 제 홈페이지 링크 참조바랍니다~