[Javascript] 0에서 특정 숫자까지 자동으로 커지게 하기 CountUp

 

가끔 홈페이지들을 보면 숫자를 가만놔두지 않고 시선을 끌도록 숫자가 올라가는걸 볼 수 있다.

아주 간단하게 setInterval로 만들어 볼 수 있다.

 

HTML, CSS는 너무 간단해서 생략하고 Javascript만 보자면

    let count = 0;

    setInterval(function () {

      if (count <= 137) {

        document.querySelector('.countup').innerHTML = count;

        count++;

      }

    }, 10)

 

이런식으로 짰다.

setInterval안에 함수로 조건문 달아주고 count변수를 countup인 p태그에 넣는 방식으로 했다.

137이 될 때까지 count의 숫자를 올려주고 제일 마지막 10은 속도를 말한다. 1000 = 1초다.