Peletakan koma dalam kaunter nombor animasi

Question

Saya telah mencuba kombinasi HTML, CSS dan JavaScript yang berbeza yang akan memberi saya pembilang nombor animasi menatal dengan simbol (+, %, dll.) di sebelah setiap nombor. Saya akhirnya menjumpai gabungan yang betul; namun, ia masih belum sempurna. Saya ingin menambah koma pada nombor 1,000 dan ke atas, tetapi apabila saya menambah koma dalam HTML, ia menghasilkan output NaN. Saya sangat baru dengan JavaScript dan saya tidak tahu apa yang perlu ditambah atau diperbaiki dalam kod semasa saya untuk memaparkan koma.

Bolehkah sesiapa menulis semula kod semasa saya untuk memaparkan koma atau membimbing saya tentang cara melakukannya? Saya akan sangat berterima kasih atas sebarang bantuan!

<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

Alih keluar koma semasa membaca HTML dan tambahkannya semula apabila dipaparkan.

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