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

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

使用文档准备：

$(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

只需拨打您的run方法在文件准备：

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