JS/jQuery number increasing animation

前端 未结 1 981
灰色年华
灰色年华 2021-01-01 08:16

Let\'s say i have a div called .number containing a number.

i want to increase that number to a new one dynamically with a counter increasing effect lik

相关标签:
1条回答
  • 2021-01-01 08:38
    $(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>

    0 讨论(0)
提交回复
热议问题