테스트 사이트 - 개발 중인 베타 버전입니다

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개

잘 활용해보겠습니다.

게시글 목록

번호 제목
16893
16890
16889
16888
16887
16886
16885
16884
16883
16882
16881
16880
16871
16870
16868
16863
16861
16856
16852
16834
16833
16829
16827
16826
16823
16822
16819
16818
16817
16806