Question

我正在从这里使用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中获取值，然后从那里开始使用魔术。如果我在100,000属性中有data-n，那么当数字动画时，它会将其缩短到100。

是的，我不确定是否需要修改此脚本，以便它可以容纳data属性中的逗号，或者在此之后是否还需要做其他事情？

Answer 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();

到动画的结尾。

总体看来，出现是为了提供我想要的结果。由于到目前为止，我只需要将其归因于一个数字即可，它应该可以正常工作。

将逗号添加到jQuery动画数字

1 个答案: