在 jQuery 动画数字中添加逗号答案

【问题标题】：Adding comma to jQuery animated numbers在 jQuery 动画数字中添加逗号
【发布时间】：2018-09-07 20:53:06
【问题描述】：

我正在使用这里的 jQuery 脚本。到目前为止它工作得很好，但我唯一想知道的是如何将逗号放入其中一个值。

由于滚动时数字会向上动画，因此很难让浏览器在事后检查整数是什么。我已经阅读了一堆将添加逗号的帖子（在这种情况下，我试图获取 100,000）但它不起作用，因为浏览器最初看不到该整数（从 0 开始）。

这是我在向下滚动页面时用来调用动画的脚本：

$(function () {
    var fx = function fx() {
      $(".stat-number").each(function (i, el) {
        var data = parseInt(this.dataset.n, 10);
        var props = {
          "from": {
            "count": 0
          },
          "to": {
            "count": data
          }
        };
        $(props.from).animate(props.to, {
          duration: 500 * 1,
          step: function (now, fx) {
            $(el).text(Math.ceil(now));
          },
          complete:function() {
            if (el.dataset.sym !== undefined) {
              el.textContent = el.textContent.concat(el.dataset.sym)
            }
          }
        });
      });
    };

    var reset = function reset() {
      console.log($(this).scrollTop())
      if ($(this).scrollTop() > 950) {
        $(this).off("scroll");
        fx()
      }
    };

    $(window).on("scroll", reset);
  });

它从 HTML 中的数据属性 data-n 中获取值，然后从那里开始发挥它的魔力。如果我在data-n 属性中有100,000，那么当数字动画时，它会在100 处缩短它。

所以，是的，我不确定是否需要修改此脚本，以便它可以容纳数据属性中的逗号，或者事后我可能需要做些什么？

【问题讨论】：

当然会截掉所有小数点，你用的是parseInt
@LucaKiebel - 有什么比使用 parseInit 更好的方法吗？
有parseFloat，但100.000 是 100，所以这并不重要
@LucaKiebel - 好的。好吧，我使用的不是小数。是逗号。我得到的数据是100,000。我可以用 PHP 去掉逗号，但是当动画命中时，它会在没有逗号的情况下将数字汇总到 100000。我不确定我是否可以使用parseInt 以外的其他东西来让它重新添加逗号，或者我是否需要采用不同的方式来处理它。谢谢！

标签： javascript jquery html jquery-animate custom-scrolling

【解决方案1】：

好的，所以在深入研究之后，我能够想出一个解决方案。

我发现了这个：

  $.fn.digits = function(){
    return this.each(function(){
      $(this).text( $(this).text().replace(/(\d)(?=(\d\d\d)+(?!\d))/g, "$1,") );
    })
  }

然后在我的 HTML 中添加了一个附加类。

然后我连接到complete:function 并补充说：

$(".class-i-added").digits();

到动画结束。

总体而言，似乎提供了我正在寻找的结果。因为我只需要将它归于一个数字（到目前为止），它就可以正常工作。

【讨论】：