킹콩랩스

jquery 타이머 만들기

<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개

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

개발자팁

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

+
분류 제목 글쓴이 날짜 조회
JavaScript 10개월 전 조회 1,036
기타 11개월 전 조회 1,464
기타 11개월 전 조회 707
JavaScript 11개월 전 조회 1,151
기타 12개월 전 조회 893
JavaScript 1년 전 조회 874
1년 전 조회 1,428
기타 1년 전 조회 971
jQuery 1년 전 조회 670
jQuery 1년 전 조회 924
기타 1년 전 조회 998
MySQL 1년 전 조회 1,077
기타 1년 전 조회 1,230
JavaScript 1년 전 조회 912
JavaScript 1년 전 조회 899
PHP 1년 전 조회 1,348
PHP 1년 전 조회 1,518
기타 1년 전 조회 1,412
기타 1년 전 조회 1,211
PHP 1년 전 조회 832
JavaScript 1년 전 조회 584
JavaScript 1년 전 조회 1,068
1년 전 조회 1,304
JavaScript 1년 전 조회 1,301
1년 전 조회 819
1년 전 조회 1,164
1년 전 조회 1,162
1년 전 조회 861
1년 전 조회 418
1년 전 조회 609
🐛 버그신고