Kommaplatzierung im animierten Zahlenzähler

Question

Ich habe verschiedene Kombinationen aus HTML, CSS und JavaScript ausprobiert, die mir einen scrollenden animierten Zahlenzähler mit einem Symbol (+, %, usw.) neben jeder Zahl geben würden. Ich habe endlich die richtige Kombination gefunden; sie ist jedoch noch nicht perfekt. Ich möchte Kommas zu Zahlen ab 1.000 hinzufügen, aber wenn ich Kommas in HTML hinzufüge, wird eine NaN-Ausgabe generiert. Ich bin JavaScript-Neuling und weiß nicht, was ich in meinem aktuellen Code hinzufügen oder korrigieren soll, um Kommas anzuzeigen.

Kann jemand meinen aktuellen Code umschreiben, um Kommas anzuzeigen, oder mir eine Anleitung dazu geben? Für jede Hilfe wäre ich sehr dankbar!

<script>
function inVisible(element) {
  //Checking if the element is
  //visible in the viewport
  var WindowTop = $(window).scrollTop();
  var WindowBottom = WindowTop + $(window).height();
  var ElementTop = element.offset().top;
  var ElementBottom = ElementTop + element.height();
  //animating the element if it is
  //visible in the viewport
  if ((ElementBottom <= WindowBottom) && ElementTop >= WindowTop)
    animate(element);
}

function animate(element) {
  //Animating the element if not animated before
  if (!element.hasClass('ms-animated')) {
    var maxval = element.data('max');
    var html = element.html();
    element.addClass("ms-animated");
    $({
      countNum: element.html()
    }).animate({
      countNum: maxval
    }, {
      //duration 2 seconds
      duration: 2000,
      easing: 'linear',
      step: function() {
        element.html(Math.floor(this.countNum) + html);
      },
      complete: function() {
        element.html(this.countNum + html);
      }
    });
  }
}
//When the document is ready
$(function() {
  //This is triggered when the
  //user scrolls the page
  $(window).scroll(function() {
    //Checking if each items to animate are
    //visible in the viewport
    $("h2[data-max]").each(function() {
      inVisible($(this));
    });
  })
});
</script>

Answer 1

阅读 HTML 时删除逗号，显示时添加回来。

function animate(element) {
  //Animating the element if not animated before
  if (!element.hasClass('ms-animated')) {
    var maxval = element.data('max');
    var html = element.html();
    element.addClass("ms-animated");
    $({
      countNum: parseInt(element.html().replace(/,/g, '')) // remove commas
    }).animate({
      countNum: maxval
    }, {
      //duration 2 seconds
      duration: 2000,
      easing: 'linear',
      step: function() {
        element.html((Math.floor(this.countNum) + html).toLocaleString());
      },
      complete: function() {
        element.html((Math.floor(this.countNum) + html).toLocaleString());
      }
    });
  }
}