JS/jQuery数字增加动画答案

【问题标题】：JS/jQuery number increasing animationJS/jQuery数字增加动画
【发布时间】：2010-12-12 21:21:59
【问题描述】：

假设我有一个名为 .number 的 div，其中包含一个数字。

我想动态地将该数字增加到一个新的数字，并在底部使用类似 one 的计数器增加效果。

任何轻量级的解决方案？

谢谢

【问题讨论】：

数字从何而来，以何种方式“动态”？

标签： javascript jquery animation

【解决方案1】：

$(function() {
  var ele = $('#haha');
  var clr = null;
  var rand = (Math.random() * 100000) >> 0;
  (loop = function() {
    clearTimeout(clr);
    (inloop = function() {
      ele.html(rand+=1);
      if(!(rand % 50)) {
        return;
      }
      clr = setTimeout(inloop, 30);
    })(); 
    setTimeout(loop, 2500);
  })();
});

DEMO

编辑：

$(function () {
    var ele = $('#haha');
    var clr = null;
    var rand = Math.floor(Math.random() * 100000); // just a random number(initial number)
    loop();
    function loop() {
        clearTimeout(clr);
        inloop();
        setTimeout(loop, 2500); //call 'loop()' after 2.5 seconds
    }
    function inloop() {
        ele.html(rand += 1);
        if (!(rand % 50)) {
            return;
        }
        clr = setTimeout(inloop, 30); //call 'inloop()' after 30 milliseconds
    }
});

$(function() {
  var ele = $('#haha');
  var clr = null;
  var rand = (Math.random() * 100000) >> 0;
  (loop = function() {
    clearTimeout(clr);
    (inloop = function() {
      ele.html(rand += 1);
      if (!(rand % 50)) {
        return;
      }
      clr = setTimeout(inloop, 30);
    })();
    setTimeout(loop, 2500);
  })();
});

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

<div id="haha"></div>

【讨论】：

谢谢！问题是我无法理解这个因为你在函数和类中使用了很多，你能把它变得更简单吗？
在第二个示例中，您需要将clearInterval() 更改为clearTimeout()，因为clearTimeout() 应该与setTimeout() 一起使用。