数字递加效果

作者: 放下手机出来嗨 | 来源:发表于2019-06-05 16:37 被阅读0次

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <body>
        <div class="count"></div>
        <script type="text/javascript" src="https://cdn.bootcss.com/jquery/2.2.2/jquery.min.js" ></script>
        <script>
            function countUp(count) {
            'use strict';
                var div_by = 100,
                    speed = Math.round(count / div_by),
                    $display = $('.count'),
                    run_count = 1,
                    int_speed = 24;
                var int = setInterval(function () {
                    if (run_count < div_by) {
                        $display.text(speed * run_count);
                        run_count++;
                    } else if (parseInt($display.text()) < count) {
                        var curr_count = parseInt($display.text()) + 1;
                        $display.text(curr_count);
                    } else {
                        clearInterval(int);
                    }
                }, int_speed);
            }
            countUp(495);
        </script>
    </body>
</html>