킹콩랩스

jquery 타이머 만들기

· 2024-12-13 (금) 09:25:05 · 1578 · 2

<script src="https://code.jquery.com/jquery-1.12.4.js"></script>

<script>

function setTimer(selector,startValue,endValue,durationTime){

    $(selector).animate(

        {

            to:startValue,

            from:endValue

        },

        {

            duration:durationTime,

            step:function(idx){

                $(this).text(Math.floor(idx));

            }

        }

    );

}

 

$(function(){

    setTimer(".timer1",0,500,1000);

    setTimer(".timer2",0,5000,2000);

    setTimer(".timer3",0,50000,3000);

    setTimer(".timer4",0,500000,4000);

    setTimer(".timer5",0,5000000,5000);

 

    // 선택자,시작값,끝값,지연시간

});

</script>

<div class='timer1'></div>

<div class='timer2'></div>

<div class='timer3'></div>

<div class='timer4'></div>

<div class='timer5'></div>

 

 

animate함수로 간단하게 구현이 가능 합니다.

|

댓글 2개

감사합니다.

잘 활용해보겠습니다.
댓글을 작성하시려면 로그인이 필요합니다.

개발자팁

5,403건

개발과 관련된 유용한 정보를 공유하세요. 질문은 QA에서 해주시기 바랍니다.

+
분류 제목 글쓴이 날짜 조회
MySQL 24-12-14 조회 1,773
기타 24-12-14 조회 1,937
JavaScript 24-12-13 조회 1,994
JavaScript 24-12-13 조회 1,579
PHP 24-12-13 조회 2,041
PHP 24-11-26 조회 2,266
기타 24-11-14 조회 2,396
기타 24-10-30 조회 2,310
PHP 24-10-11 조회 2,074
JavaScript 24-10-10 조회 1,247
JavaScript 24-09-26 조회 1,785
24-09-25 조회 2,274
JavaScript 24-09-07 조회 2,033
24-09-11 조회 1,486
24-09-19 조회 2,429
24-09-10 조회 1,867
24-08-19 조회 1,591
24-10-03 조회 1,649
24-08-07 조회 1,220
24-07-23 조회 1,913
24-07-08 조회 1,506
24-06-27 조회 1,407
PHP 24-08-23 조회 1,600
PHP 24-07-31 조회 1,344
OS 24-07-22 조회 1,751
기타 24-07-22 조회 1,187
기타 24-07-12 조회 1,401
기타 24-07-02 조회 1,542
기타 24-07-02 조회 1,082
JavaScript 24-06-30 조회 1,203