[js/jQuery] 기본편_카운트업 숫자 올라가는 효과 구현 (ft. 숫자 자동 증가)

 

숫자 카운트업 효과를

setInterval, clearInterval 메서드를

이용하여 구현하겠습니다.

 

실무에서 홈페이지 또는 배너에 숫자가 자동으로 올라가는 효과를 종종 사용합니다.

 

setInterval() / clearInterval()

일정한 시간 간격으로 코드를 실행하는 메서드는 setInterval()과 setTimeout()가 있습니다.
setInterval과 clearInterval은 서로 짝꿍이라서 보통 같이 사용합니다.

setInterval()은 일정한 시간 간격으로 코드를 반복적으로 실행하고,
setTimeout()은 일정한 시간 후에 코드를 한 번만 실행하고 종료됩니다.

 

setInterval() :

- 코드를 일정 시간 간격으로 반복 실행
- 기본형: setInterval(function (){코드}, 시간 간격(ms));
- 시간 간격은 1/1000초 단위(ms)로 작성합니다. (예: 1초 = 1000, 3초 = 3000)

 

clearInterval() :

- setInterval() 메소드를 취소
- 기본형: clearInterval(참조변수);

 

구현 내용

· 0에서 시작하여 99까지 숫자 증가
· 0.1마다 숫자 증가
· 99가 되면 카운트 정지아래의 코드를 보고 따라 해 주세요. 참고로 사전에 jQuery min 파일 연결 잊지 마세요.

 

html

<div>
  <ul>
    <li class="number">99</li>
  </ul>
</div>

 

css

.number {
  width: 150px;
  height: 150px;
  margin: 0 auto;
  background-color: #ffb611;
  font-size: 100px;
  list-style: none;
  text-align: center;
  margin-top: 50px;
  color: #333;
  border-radius: 50%;
}

 

javascript, jQuery

$(function() {
  var cnt0 = 0;

  counterFn();

  function counterFn() {

    id0 = setInterval(count0Fn, 100);

    function count0Fn() {
      cnt0++;
      if (cnt0 > 99) {
        clearInterval(id0);
      } else {
        $(".number").text(cnt0);
      }
    }
  }
});		

 

화면 보기 (Result 클릭)

---

숫자 카운트 업 구현의 심화 포스트는 아래 링크로 이동해주세요.

https://goddino.tistory.com/37

[js/jQuery] setInterval 카운트업 숫자 올라가는 효과 구현