jQuery动态计数器修改需求：添加千位分隔符与数值后缀加号

修改后完整实现代码 #

// number count for stats, using jQuery animate
// 千位分隔格式化函数
function formatNumber(num) {
  return Math.floor(num).toString().replace(/\B(?=(\d{3})+(?!\d))/g, ',');
}

$('.counting').each(function(countStats) {
  var $this = $(this),
      countTo = $this.attr('data-count'),
      // 判断当前计数元素后是否有加号标识，决定是否显示+
      hasPlus = $this.next().is('[class^="plus"]');
  
  // 隐藏原HTML中单独的加号元素，避免重复显示
  if (hasPlus) $this.next().hide();
  
  $({ countNum: $this.text()}).animate({
    countNum: countTo
  },
  {
    duration: 3000,
    easing:'linear',
    step: function() {
      // 格式化数字+按需拼接加号
      $this.text(formatNumber(this.countNum) + (hasPlus ? '+' : ''));
    },
    complete: function() {
      $this.text(formatNumber(this.countNum) + (hasPlus ? '+' : ''));
      //alert('finished');
    }
  });  
});

核心修改说明 #

• 新增了formatNumber工具函数：通过正则匹配实现数字的千位分隔符自动添加，适配所有长度的数字，无需额外依赖
• 新增加号判断逻辑：自动识别原HTML中.counting元素后是否带plus开头的加号元素，完全匹配你现有HTML结构，不需要修改原有HTML代码，同时自动隐藏原有单独的加号元素，避免重复显示
• 改写了step和complete回调的文本更新逻辑：在数字动态增长的每一步都会先格式化数字、按需拼接加号，保证动画过程中显示自然，不会出现字符跳动或者突兀新增的情况

内容的提问来源于stack exchange，提问作者Bryce Steuer