[js/jQuery] 응용편_카운트업 숫자 올라가는 효과 구현. 숫자 자동 증가

 

자바스크립트, 제이쿼리의

setInterval, clearInterval 메서드를 이용하여

웹페이지에서 많이 사용되는 숫자 카운트업을 구현하겠습니다.

 

이전 카운트업 구현하기 포스트는 맛보기용 기초였고, 오늘은 실전편이라고 생각하시면 됩니다.
이전 포스트가 궁금하신 분은 아래 링크로 이동해주세요. 

https://goddino.tistory.com/20

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

---

 

setInterval() / clearInterval()

일정한 시간 간격으로 코드를 실행하는 메소드는 setInterval()과 setTimeout()가 있습니다. 

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

홈페이지에서 슬라이드가 자동으로 움직이는 것은 setInterval() 메서드를 이용하여 구현한 것이고, setInterval과 clearInterval은 서로 짝꿍이라서 보통 같이 사용합니다. 

setInterval() 

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

 

clearInterval()

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

 

구현 내용

· 숫자: 785, 987, 350 
· 카운팅 시간: 10초 
· setInterval 시간 구하기(ms): (10 / 숫자) * 1000 
· 0부터 해당 숫자까지 10초 동안 카운트된다. 해당 숫자가 되면 카운트가 정지된다.

 

아래의 코드를 보고 따라 해 주세요. 참고로 사전에 jQuery min 파일 연결 잊지마세요.

html

<ul>
        <li>
            <h2 class="number">785</h2>
            <i>Clients</i>
        </li>
        <li>
            <h2 class="number">987</h2>
            <i>Project</i>
        </li>
        <li>
            <h2 class="number">350</h2>
            <i>Items</i>
        </li>
    </ul>

 

css

ul {
  width: 100%;
  color: #666;
  text-align: center;
  margin-top: 100px;
}

li {
  float: left;
  width: 30%;
  list-style: none;
  border-left: 1px solid #F9B514;
}

li:first-child {
  border-left: 0;
}

 

javascript

$(function() {
  var count0 = count1 = count2 = 0;

  timeCounter();

  function timeCounter() {

    id0 = setInterval(count0Fn, 12.738853);
    //12.738853=(10/785)*100
    function count0Fn() {
      count0++;
      if (count0 > 785) {
        clearInterval(id0);
      } else {
        $(".number").eq(0).text(count0);
      }

    }

    id1 = setInterval(count1Fn, 10.13171226);
    //10.13171226=(10/987)*1000
    function count1Fn() {
      count1++;
      if (count1 > 987) {
        clearInterval(id1);
      } else {
        $(".number").eq(1).text(count1);
      }
    }

    id2 = setInterval(count2Fn, 28.57142857);
    //28.57142857=(10/350)*1000
    function count2Fn() {
      count2++;
      if (count2 > 350) {
        clearInterval(id2);
      } else {
        $(".number").eq(2).text(count2);
      }
    }
  }
});

 

화면 보기(Result 클릭)