自動增加JavaScript中的計數器

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();
});

查看>> JS小提琴演示

我也想在其中添加一個重置按鈕，它將在每次單擊時從0開始再次運行。

Answer 1

這是更新的Jsfiddle演示

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

准備好使用文檔：

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

您可以通過將count分配為0來重置計數器。

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

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

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

Answer 3

你可以在onload中調用一個函數

喜歡

 <script>
  run();
 </script>

每當頁面加載時，run（）函數都會調用。

Answer 4

只需在document ready中調用您的run方法：

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