如何使用jQuery的逗号动画来增加数字? [英] How to increment number using animate with comma using jQuery?

问题描述

我正在尝试在页面上的元素内增加一个数字.但是我需要该数字包含千位数的逗号. (例如45,000而不是45000)

I'm trying to increment a number inside an element on page. But I need the number to include a comma for the thousandth place value. (e.g. 45,000 not 45000)

<script>
// Animate the element's value from x to y:
  $({someValue: 40000}).animate({someValue: 45000}, {
      duration: 3000,
      easing:'swing', // can be anything
      step: function() { // called on every step
          // Update the element's text with rounded-up value:
          $('#el').text(Math.round(this.someValue));
      }
  });
</script>
<div id="el"></div>

如何使用逗号加数字来增加数字?

How can I increment a number using animate with comma?

推荐答案

工作演示 http: //jsfiddle.net/4v2wK/

随时根据需要进行更多更改，您也可以查看货币格式设置，希望这可以满足您的需求:)

Feel free to change it more for your need, you can also look at the currency formatter, Hope this will fit your need :)

代码

// Animate the element's value from x to y:
  var $el = $("#el"); //[make sure this is a unique variable name]
  $({someValue: 40000}).animate({someValue: 45000}, {
      duration: 3000,
      easing:'swing', // can be anything
      step: function() { // called on every step
          // Update the element's text with rounded-up value:
          $el.text(commaSeparateNumber(Math.round(this.someValue)));
      }
  });

 function commaSeparateNumber(val){
    while (/(\d+)(\d{3})/.test(val.toString())){
      val = val.toString().replace(/(\d)(?=(\d\d\d)+(?!\d))/g, "$1,");
    }
    return val;
  }

**输出*

这篇关于如何使用jQuery的逗号动画来增加数字?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！