搜索

首页  >  问答  >  正文

动画数字计数器中的逗号放置

我一直在尝试 HTML、CSS 和 JavaScript 的不同组合,这会给我一个滚动的动画数字计数器,每个数字旁边都有一个符号(+、% 等)。我终于找到了正确的组合;然而,它还不够完美。我想向 1,000 及以上的数字添加逗号,但是当我在 HTML 中添加逗号时,它会生成 NaN 输出。我对 JavaScript 非常陌生,我不知道在当前代码中添加或修复什么来显示逗号。

有人能够重写我当前的代码以显示逗号或指导我如何执行此操作吗?我将非常感谢任何帮助!

<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粉277824378P粉277824378309 天前546

全部回复(1)我来回复

  • P粉211273535

    P粉2112735352024-01-17 00:50:16

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

    回复
    0
  • 取消回复