자바 스크립트에서 카운터 자동 증가

Question

페이지로드시 자동으로 0에서 지정된 값으로 카운터에 애니메이션을 적용하려고합니다. 최근에 하나 찾았지만 버튼 클릭으로 작동합니다.

var amount=parseInt($('#amount').val()); 
var i = parseInt($('#count').val()); 
var tim; 

function run(){ 
    tim = setInterval(function(){ 
     if(i>=amount){clearInterval(tim); return;} 
     $('#count').val(++i); 
    },100);   
} 

$('#runner').click(function(){   
    run(); 
}); 

SEE >>JS fiddle DEMO

또한 나는 모든 클릭에 0에서 다시 실행 거기에 리셋 버튼을 추가하고 싶습니다. 준비

Answer 1

is Updated Jsfiddle Demo

HTML :

이

<input type="hidden" value="10000" id="amount"/> 
<input type="text" value="0" id="count"/> 
<input type="button" value="Start" id="starter"/> 
<input type="button" value="Stop" id="stopper"/> 
<input type="button" value="reset" id="resetter"/> 

스크립트 :

<script type="text/javascript"> 
    var amount=parseInt($('#amount').val()); 
    var i = parseInt($('#count').val()); 
    var tim; 

    function run(){ 
     tim = setInterval(function(){ 
      if(i>=amount){clearInterval(tim); return;} 
      $('#count').val(++i); 
     },100);   
    } 
    run(); 

    $('#stopper').click(function(){   
     clearInterval(tim); 
    }); 

    $('#resetter').click(function(){  
    clearInterval(tim);  
    i=0; 
    $('#count').val(i); 
    run(); 
    }); 

    $('#starter').click(function(){   
     clearInterval(tim); 
     run(); 
    }); 
</script> 

Answer 2

를 사용하여 문서 : 당신은 0

<input id="resetCount" type="button" /> 

function reset() { 
    $('#count').val(0); 
} 

$("#resetCount").click(function() { 
    reset(); 
}); 

Answer 3

에 count을 할당하여 카운터를 재설정 할 수 있습니다

$(document).ready(function() { 
    run(); 
}); 

당신은 당신이

처럼이

을 할 수있는 온로드에서 함수를 호출 할 수 있습니다

<script> 
    run(); 
</script> 

페이지가로드 될 때마다 run() 함수가 호출됩니다.

Answer 4

그냥 준비 문서에 실행 메소드를 호출

여기

$(document).ready(function() { 
    run(); 
});