数字递增

 (function($){
    $.fn.numberRock=function(options){
        var defaults={
            speed:24,
            count:100
        };
        var opts=$.extend({}, defaults, options);

        var div_by = 100,
        count=opts["count"],
        speed = Math.floor(count / div_by),
        sum=0,
        $display = this,
        run_count = 1,
        int_speed = opts["speed"];
        var int = setInterval(function () {
            if (run_count <= div_by&&speed!=0) {
                $display.text(sum=speed * run_count);
                run_count++;
            } else if (sum < count) {
                $display.text(++sum);
            } else {
                clearInterval(int);
            }
        }, int_speed);
    }

})(jQuery);

  

<!DOCTYPE html>
<html>
    <head>
        <title>鹰空教育——专注IT软件,人才培养</title>
        <meta http-equiv="content-type" content="text/html; charset=utf-8">
    </head>
    <body> 
         <ul class="content1_ul_box">
          <li>
            <h2><span class="index_sz1">100</span>+</h2>
          </li>
          <li>
            <h2><span class="index_sz2">12</span>年</h2>
          
          </li>
          <li>
            <h2><span class="index_sz3">1500</span>+</h2>
          </li>
          <li>
            <h2><span class="index_sz4">24</span>小时</h2>
           
          </li>
          <li>
            <h2><span class="index_sz5">800</span>+</h2>
          
          </li>
        </ul>
        <script src='./lib/jquery.min.js'></script>
          <script type="text/javascript" src="demo.js"> </script>
       <script>
            $(function(){
            $(".index_sz1").numberRock({
                speed:50,
                count:100
            })
            $(".index_sz2").numberRock({
                speed:50,
                count:12
            })
            $(".index_sz3").numberRock({
                speed:50,
                count:1500
            })
            $(".index_sz4").numberRock({
                speed:50,
                count:24
            })
            $(".index_sz5").numberRock({
                speed:50,
                count:800
            })
          })
       </script>
    </body>
</html>

  

posted @ 2021-01-06 19:22  xiaorain124  阅读(97)  评论(0)    收藏  举报