숫자 증가(2)

jb kim·2021년 12월 23일
0

Web Projects

목록 보기
29/50

html에서 적힌 숫자를 제거 => js에서 처리

<div class="counter" data-target="12000"></div>
<div class="counter" data-target="5000"></div>
<div class="counter" data-target="7500"></div>

js

// counter 클래스가 있는 모든 객체들을 counters에 저장
const counters = ?;

counters.forEach((counter) => {
  counter.textContent = '0';
}

counters.forEach((counter) => {
  counter.innerText = '0';

  const updateCounter = () => {
    const target = +counter.getAttribute('data-target');
    //Number('1') , parseInt('1')

    const c = +counter.textContent;

    const increment = target / 200;

    if (c < target) {
      counter.textContent = `${Math.ceil(c + increment)}`;
      setTimeout(updateCounter, 1);
    } else {
      counter.textContent = target;
    }
  };

  updateCounter();
});
profile
픽서

0개의 댓글