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

jquery 타이머 만들기

· 11개월 전 · 709 · 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개

감사합니다.

잘 활용해보겠습니다.

게시글 목록

번호 제목
17523
17516
17515
17514
17498
17493
17490
17487
17485
17481
17478
17477
17474
17473
17472
17470
17469
17463
17462
17461
17460
17458
17457
17454
17453
17448
17447
17446
17445
17444