滚动上的动画计数器[重复]

Posted

技术标签:

【中文标题】滚动上的动画计数器[重复]【英文标题】:Animated Counter on scroll [duplicate] 【发布时间】:2018-08-29 15:08:02 【问题描述】:

所以,我找到了这支很酷的笔Creative Animated Counter on Scroll,但我想知道如何格式化数字,以便在超过一千个时使用逗号。

function visible(partial) 
  var $t = partial,
    $w = jQuery(window),
    viewTop = $w.scrollTop(),
    viewBottom = viewTop + $w.height(),
    _top = $t.offset().top,
    _bottom = _top + $t.height(),
    compareTop = partial === true ? _bottom : _top,
    compareBottom = partial === true ? _top : _bottom;

  return ((compareBottom <= viewBottom) && (compareTop >= viewTop) && $t.is(':visible'));


$(window).scroll(function() 
  if (visible($('.count-digit'))) 
    if ($('.count-digit').hasClass('counter-loaded')) return;
    $('.count-digit').addClass('counter-loaded');

    $('.count-digit').each(function() 
      var $this = $(this);
      jQuery(
        Counter: 0
      ).animate(
        Counter: $this.text()
      , 
        duration: 5000,
        easing: 'swing',
        step: function() 
          $this.text(Math.ceil(this.Counter));
        
      );
    );
  
)

【问题讨论】:

使用提供的重复问题,您可以使用已接受的答案并更改以下行:$this.text(Math.ceil(this.Counter));。希望对您有所帮助! 试试这个 $this.text(Math.ceil(this.Counter).toString().replace(/\B(?=(\d3)+(?!\d) )/g, ",")); 【参考方案1】:

您要查找的方法是toLocaleString。您可以在数字上调用它来获取您要查找的逗号。您只需要像这样更改步进函数:

step: function() 
  $this.text(Math.ceil(this.Counter).toLocaleString());

【讨论】:

那行得通。非常感谢!

以上是关于滚动上的动画计数器[重复]的主要内容,如果未能解决你的问题,请参考以下文章

等效于 Linux 上的 Win32 性能计数器 [重复]

滚动 UIPickerView 上的应用程序崩溃

VBA脚本上的Excel VBA对象需要错误在计数器时重复行

使用窗口函数计算滚动计数

QML:等到动画完成

有没有办法从未完成的 UIView 动画中获取位置(或中心)状态?