在JavaScript中自动增加计数器

Auto incrementing a counter in JavaScript

本文关键字：增加 计数器 JavaScript      更新时间：2023-09-26

我想在页面加载时自动将计数器从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重新运行。

这里是更新后的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>

使用文档准备:

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

您可以通过将count赋值为0来重置计数器。

<input id="resetCount" type="button" />
function reset() {
    $('#count').val(0);
} 
$("#resetCount").click(function() {
   reset();
});

你可以在onload中调用一个函数

 <script>
  run();
 </script>

run()函数将在页面加载时调用。

在document ready中调用run方法:

$(document).ready(function() {  
  run();
});
相关文章：