Question

我意识到有很多关于数字计数器的SO帖子，还有一些关于在数字字符串中添加逗号的SO帖子。我已经找到了尽可能多的内容，并且通过反复试验，我能够使数字计数器在测试页上正常工作（以及添加了在用户滚动到某个div时触发计数器的功能）在页面上-因此，您必须滚动滚动数字，然后才能显示...这对我们的预期用途是很好的。）

这是棘手的部分：我无法将JQuery添加到我正在处理的网站上，因为我的文件上传访问权限受到限制（仅限于文档，PDF和图像）。我认为它当前引用的是Jquery，但据我所知，它是v.1.1，似乎很老了...

上周，我尝试了在SO和JSFiddle上可以找到的所有解决方案，并且下面引用的代码是唯一一种具有动画效果的解决方案，但是并没有在百分之一和千分之一之间添加逗号。

我主要是摄影师/设计师，所以我是Java语言的菜鸟。我希望有人能提供帮助。我只需要在此数字计数器的百分之一至千位之间添加逗号。

测试页：

http://www.DenverRescueMission.org/test

注释：

.toLocaleString（）-似乎不起作用，但我可能正在创建语法错误，方法是将其添加到错误的位置。
我意识到这段代码可能比需要的代码笨拙得多，但是这是我能在我们的网站上找到的唯一版本。
我会很乐意尝试任何更清洁代码的建议，但我只知道下面的代码实际上有效。
数字样式的CSS不完整，但可行进行测试。

JS：

! function(t) {
t.fn.countTo = function(e) {
    return e = e || {}, t(this).each(function() {
        var o = t.extend({}, t.fn.countTo.defaults, {
                from: t(this).data("from"),
                to: t(this).data("to"),
                speed: t(this).data("speed"),
                refreshInterval: t(this).data("refresh-interval"),
                decimals: t(this).data("decimals")
            }, e),
            n = Math.ceil(o.speed / o.refreshInterval),
            a = (o.to - o.from) / n,
            r = this,
            l = t(this),
            i = 0,
            c = o.from,
            s = l.data("countTo") || {};

        function f(t) {
            var e = o.formatter.call(r, t, o);
            l.html(e)
        }
        l.data("countTo", s), s.interval && clearInterval(s.interval), 
s.interval = setInterval(function() {
            i++, f(c += a), "function" == typeof o.onUpdate && 
o.onUpdate.call(r, c);
            i >= n && (l.removeData("countTo"), clearInterval(s.interval), c 
= o.to, "function" == typeof o.onComplete && o.onComplete.call(r, c))
        }, o.refreshInterval), f(c)
    })
}, t.fn.countTo.defaults = {
    from: 0,
    to: 0,
    speed: 1e3,
    refreshInterval: 100,
    decimals: 0,
    formatter: function(t, e) {
        return t.toLocaleString('en-US').toFixed(e.decimals)
    },
    onUpdate: null,
    onComplete: null
}
}(jQuery), jQuery(function(t) {
t(".count-number").data("countToOptions", {
        formatter: function(t, e) {
            return t.toString().replace(/\B(?=(?:\d{3})+(?!\d))/g, ",")
        }
    }

    function commas(str) {
        return (str + "").replace(/\B(?=(?:\d{3})+(?!\d))/g, ",");
    }
}), t(window).scroll(function() {
var e = t("#stats").offset().top,
    o = t("#stats").outerHeight(),
    n = t(window).height(),
    a = t(this).scrollTop();
if (console.log(e - n, a), a > e + o - n) {
    console.log("reach"), t(".timer").each(function(e) {
        var o = t(this);
        e = t.extend({}, e || {}, o.data("countToOptions") || {}), 
o.countTo(e)
    }), t(window).off("scroll")
}
})
});

HTML：

<p class="timer stats-number" data-to="907125" data-speed="1500"></p>

Answer 1

我错过了使用逗号的课。

该类为“计数”。

我知道这最终将是一个愚蠢的错误，只是看不到它。

用逗号修改数字计数器

1 个答案: