jQuery简单实现数字滚动在原数字基础上增加

最新推荐文章于 2025-09-05 10:01:58 发布

原创最新推荐文章于 2025-09-05 10:01:58 发布 · 428 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #jquery #html5

Jquery数字滚动专栏收录该内容

1 篇文章

订阅专栏

这个示例展示了如何利用jQuery创建一个简单的后台管理系统数据显示功能，动态地改变数字以达到装逼的效果。代码中定义了一个`numberRock`方法，用于在指定时间内平滑地从起始数字过渡到终止数字，并提供了不同速度和缓动效果的选择。用户可以通过点击按钮修改数字的滚动展示。

这个功能比较简单主要用作的后台管理系统的一些数据显示,可以用来装逼用效果如下:

在这里插入图片描述

可以点击修改滚动的数字

代码如下

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        #count {
            font-size: 50px;
            font-weight: 700;
        }
    </style>
    <script src="js/jquery.min.js"></script>
</head>

<body>
    <div id="count"></div>
    <div id="count1"></div>
    <div id="count2"></div>

    <button id="BTN">修改</button>
    <script>
        $(function () {
            $("#count").numberRock({
                lastNumber: 8000,	//终止数字
                duration: 800,
                easing: 'swing',  	//慢快慢
            });
        });
        $(function () {
            $("#count1").numberRock({
                lastNumber: 100000, //终止数字
                duration: 2000,
                easing: 'linear',  	//慢快慢
            });
        });
        $(function () {
            $("#count2").numberRock({
                lastNumber: 1500, //终止数字
                fristNumber: 1000,
                duration: 1000,
                easing: 'linear',  	//慢快慢
            });
        });

        (function ($) {
            $.fn.numberRock = function (options) {
                var defaults = {
                    fristNumber: '',
                    lastNumber: '',
                    duration: 2000,
                    easing: 'swing'  //swing(默认 : 缓冲 : 慢快慢)  linear(匀速的)
                };
                var opts = $.extend({}, defaults, options);

                $(this).animate({
                    num: "numberRock",
                }, {
                    duration: opts.duration,
                    easing: opts.easing,
                    complete: function () {
                        console.log("success");
                    },
                    step: function (a, b) {  //可以检测我们定时器的每一次变化
                        $(this).html(parseInt(opts.fristNumber + b.pos * (opts.lastNumber - opts.fristNumber)));

                    }
                });

            }

        })(jQuery);

        document.getElementById("BTN").onclick = function () {
            $(function () {
                $("#count2").numberRock({
                    lastNumber: 1600, //终止数字
                    fristNumber: 1500,
                    duration: 1000,
                    easing: 'linear',  	//慢快慢
                });
            });
        }
    </script>
</body>

</html>