代码之家 › 专栏 › 技术社区 › Jasbir

动画编号需要在60秒内停止

jquery-animate html jquery javascript

Jasbir · 技术社区 · 6 年前

正在从中设置数字动画 开始(1000) 到 结束(10000) . 但我希望这个动画在一些预定义的时间内停止,例如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>

注:

如果结束值很小,如1000,则此动画需要在60秒内停止;如果结束值很大,如10000000,则此动画也需要在60秒内停止。请帮我修一下好吗?

2 回复 | 直到 6 年前

Jose Rojas 6 年前

您可以遵循的一种策略是在动画开始时设置时间戳,并检查需要多长时间才能停止。

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

Calvin Nunes 6 年前

我做了一个不同的aproach,看看。 (我让它停了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>