动画数字需要在 60 秒内停止

Question

数字从 start(1,000) 到 end(10,000)。但我希望这个动画在某个预定义的时间内停止，比如 60 秒。 结束值 可以很大，即 23,600,191 但此动画需要在 60 秒后停止。

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

function myCalculator() {
    
        $(".container2").show();
        var start = 1000;
        var end = 10000;
     var duration = 2000;
        animateValue("value", start, end, duration); 
    }
    function animateValue(id, start, end, duration) {
        var range = end - start;
        var current = start;
        var increment = end > start? 11 : -1;
        var stepTime = Math.round(duration / range);
     var obj = document.getElementById(id);
        var timer = setInterval(function() {
            current += increment;
            obj.innerHTML = parseFloat(current).toLocaleString('en-US');
            if ((increment > 0 && current >= end) || (increment < 0 && current <= end)) {
                    obj.innerHTML = parseFloat(end).toLocaleString('en-US');
                    clearInterval(timer);
                }
         }, stepTime);
      
          }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<button name="submit" type="button" id="contact-submit" onclick="myCalculator();" >Click Here to See Animation</button>    
<div style="display:none;" class="container2">Animating Amount $ <span id="value" ></span></div>

注：

如果结束值小到 1,000 那么这个动画需要在 60 秒内停止，如果结束值大到 10,000,000 那么这个动画也需要在 60 秒内停止。请帮我解决一下？

Answer 1

您可以遵循的一个策略是动画开始时的时间戳，并检查经过了多少时间才停止。

function myCalculator() {

  $(".container2").show();
  var start = 1000;
  var end = 200000;
  var duration = 2000;
  animateValue("value", start, end, duration);    

 }

 function animateValue(id, start, end, duration) {
   var range = end - start;
   var current = start;
   var increment = end > start? 11 : -1;
   var stepTime = Math.round(duration / range);
   var obj = document.getElementById(id);
   //timestamp when animation starts
   var startTime = performance.now();
   var timer = setInterval(function() {
      current += increment;
      obj.innerHTML = parseFloat(current).toLocaleString('en-US');

      // this instruction check if has passed 60 seconds 
      // (performance.now() - startTime)/1000 > 60 ) 
      if ((increment > 0 && current >= end) || (increment < 0 && current <= end) || ((performance.now() - startTime)/1000 > 60 )) {
            obj.innerHTML = parseFloat(end).toLocaleString('en-US');
            clearInterval(timer);
        }
     }, stepTime);

  }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<button name="submit" type="button" id="contact-submit" onclick="myCalculator();" >Click Here to See Animation</button>    
<div style="display:none;" class="container2">Animating Amount $ <span id="value" ></span></div>

此指令检查经过了多长时间：

(performance.now() - startTime)/1000 > 60

Answer 2

我做了一个不同的方法，你看看。（我让它在 6 秒后停止以便更容易看到它工作，更改 var secondsLeft 以适应您的时间）

var timer;

function myCalculator() {    
    $(".container2").show();
    var start = 1000;
    var end = 10000;
    var duration = 2000;
    animateValue("value", start, end, duration); 
}

function animateValue(id, start, end, duration) {
    var secondsLeft = 6000; 
    runTime(id, start, end, duration);
    setTimeout(function(){stopClock();}, secondsLeft);   
}
    
function runTime(id, start, end, duration){
    var range = end - start;
    var current = start;
    var increment = end > start? 11 : -1;
    var stepTime = Math.round(duration / range);
    var obj = document.getElementById(id);
    timer = setInterval(function() {
        current += increment;
        obj.innerHTML = parseFloat(current).toLocaleString('en-US');            
    }, stepTime);
}

function stopClock(){
  clearInterval(timer);
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<button name="submit" type="button" id="contact-submit" onclick="myCalculator();" >
  Click Here to See Animation
</button>    
<div style="display:none;" class="container2">Animating Amount $ 
  <span id="value" ></span>
</div>

动画数字需要在 60 秒内停止

Animating Number needs to be stop with in 60 second

html

javascript

jquery

jquery-animate