javascript JS/jQuery 数字递增动画

JS/jQuery number increasing animation

提问by Ryan

Let's say i have a div called .numbercontaining a number.

假设我有一个.number包含一个数字的 div 。

i want to increase that number to a new one dynamically with a counter increasing effect like this onein the bottom.

我想提高这个数字到一个新的动态，像这样一个计数器增加影响一个在底部。

Any lightweight solutions?

任何轻量级的解决方案？

Thanks

谢谢

回答by

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

演示

Edit:

编辑：

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