jquery数字滚动

最新推荐文章于 2025-03-17 17:26:35 发布

Whales_w

最新推荐文章于 2025-03-17 17:26:35 发布

阅读量787

点赞数

分类专栏： html 文章标签： jquery

本文链接：https://blog.youkuaiyun.com/Whales_w/article/details/120036185

版权

html 专栏收录该内容

39 篇文章

订阅专栏

这篇博客介绍了一个使用jQuery实现的数字动态计数动画插件。通过设置`data-from`、`data-to`、`data-speed`等属性，可以自定义计数的起始值、结束值和动画速度。代码中还定义了`formatter`函数，用于格式化显示的数字，支持小数点后的位数控制。此外，动态赋值后需要调用`.each(count)`重新渲染计数器。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!-- 需要加class .itmer，  data-from 为 开始数值 不填默认从0开始 data-to  
      data-speed 动画时间单位 毫秒 -->
<h2 class="timer" data-from="100" data-to="300" data-speed="1500"></h2>

方法

$.fn.countTo = function(a) {
    a = a || {};
    return $(this).each(function() {
        var c = $.extend({},
        $.fn.countTo.defaults, {
            from: $(this).data("from"),
            to: $(this).data("to"),
            speed: $(this).data("speed"),
            refreshInterval: $(this).data("refresh-interval"),
            decimals: $(this).data("decimals")
        },
        a);
        var h = Math.ceil(c.speed / c.refreshInterval),
        i = (c.to - c.from) / h;
        var j = this,
        f = $(this),
        e = 0,
        g = c.from,
        d = f.data("countTo") || {};
        f.data("countTo", d);
        if (d.interval) {
            clearInterval(d.interval)
        }
        d.interval = setInterval(k, c.refreshInterval);
        b(g);
        function k() {
            g += i;
            e++;
            b(g);
            if (typeof(c.onUpdate) == "function") {
                c.onUpdate.call(j, g)
            }
            if (e >= h) {
                f.removeData("countTo");
                clearInterval(d.interval);
                g = c.to;
                if (typeof(c.onComplete) == "function") {
                    c.onComplete.call(j, g)
                }
            }
        }
        function b(m) {
            var l = c.formatter.call(j, m, c);
            f.html(l)
        }
    })
};
$.fn.countTo.defaults = {
    from: 0,
    to: 0,
    speed: 1000,
    refreshInterval: 100,
    decimals: 0,
    formatter: formatter,
    onUpdate: null,
    onComplete: null
};
//原版
/* function formatter(b, a) {
    return b.toFixed(2)
} */
function formatter(b, a) {
	if(a.to.toString().indexOf('.') != -1){
		return b.toFixed(a.to.toString().split(".")[1].length);
	}
	else{
		return b.toFixed();
	}
}
$("#count-number").data("countToOptions", {
    formatter: function(b, a) {
        return b.toFixed().replace(/\B(?=(?:\d{3})+(?!\d))/g, ",")
    },
	// toFixed(2) 小数点后2位
});
//所有的都需要加上class =“timer” 然后$(".timer").each(count);动态加载
$(".timer").each(count);
function count(a) {
    var b = $(this);
    a = $.extend({},
    a || {},
    b.data("countToOptions") || {});
    b.countTo(a)
};