본문 바로가기
coding

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

by 코딩하는 갓디노 2020. 6. 9.

 

숫자 카운트업 효과를
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 카운트업 숫자 올라가는 효과 구현

785 Clients 987 Project 350 Items javascript, jQuery의 setInterval, clearInterval 메서드를 이용하여 웹페이지에서 많이 사용되는 숫자 카운트업을 구현하겠습니다. 이전 카운트업 구현하기 포스트는 맛보기..

goddino.tistory.com

 

댓글1

  • TT 2021.07.29 15:07

    안녕하세요! 만들어주신 스크립트 활용하려고하는데 혹시 소수점 표시까지 카운팅되게하는 방법이 있을까요? ㅠ
    답글