Peletakan koma dalam kaunter nombor animasi
P粉277824378
P粉277824378 2024-01-16 14:43:34
0
1
571

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>

P粉277824378
P粉277824378

membalas semua(1)
P粉211273535

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());
      }
    });
  }
}
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan