<div class="count">0</div>
.count {
  width: 370px;
  height: 120px;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 3rem;
  font-weight: bold;
  background: #febf00;
  border-radius: 1rem;

  color: #000;
}

/* ----------- */
@import url("https://cdn.jsdelivr.net/gh/orioncactus/pretendard/dist/web/static/pretendard.css");

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  outline: none;
  word-break: break-all;
  font-family: Pretendard;
}

body {
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
}
const counter = ($counter, max) => {
  let now = max;

  const handle = setInterval(() => {
    $counter.innerHTML = Math.ceil(max - now);
  
    // 목표수치에 도달하면 정지
    if (now < 1) {
      clearInterval(handle);
    }
    
    // 증가되는 값이 계속하여 작아짐
    const step = now / 10;
    
    // 값을 적용시키면서 다음 차례에 영향을 끼침
    now -= step;
  }, 50);
}

window.onload = () => {
  // 카운트를 적용시킬 요소
  const $counter = document.querySelector(".count");
  
  // 목표 수치
  const max = 17249;
  
  setTimeout(() => counter($counter, max), 2000);
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.