Question

我已经能够使用this code为零编号设置动画：

$('.count').each(function () {
    $(this).prop('Counter',0).animate({
        Counter: $(this).text()
    }, {
        duration: 4000,
        easing: 'swing',
        step: function (now) {
            $(this).text(Math.ceil(now));
        }
    });
});

但是我需要用逗号显示我的号码，例如30,000,000。当我这样做时，这段代码失败了。是否有一种简单的方法可以使用这种格式？

Answer 1

您可以添加

.toLocaleString('en')

到step属性：

step: function(now) {
    $(this).text(Math.ceil(now).toLocaleString('en'));
}

您也可以传入navigator.language而不是'en'，并根据用户浏览器语言设置显示小数。

Answer 2

可以使用regex替换：

$(function(){

  $('.count').each(function () {
    $(this).prop('Counter',0).animate({
        Counter: $(this).text()
    }, {
        duration: 4000,
        easing: 'swing',
        step: function (now) {
            $(this).text(Math.ceil(now).toString().replace(/(\d)(?=(\d\d\d)+(?!\d))/g, "$1,"));
        }
    });
  });
  
});

#shiva
{
  width: 100px;
	height: 100px;
	background: red;
	-moz-border-radius: 50px;
	-webkit-border-radius: 50px;
	border-radius: 50px;
  float:left;
  margin:5px;
}
.count
{
  line-height: 100px;
  color:white;
  margin-left:30px;
  font-size:25px;
}
#talkbubble {
   width: 120px;
   height: 80px;
   background: red;
   position: relative;
   -moz-border-radius:    10px;
   -webkit-border-radius: 10px;
   border-radius:         10px;
  float:left;
  margin:20px;
}
#talkbubble:before {
   content:"";
   position: absolute;
   right: 100%;
   top: 26px;
   width: 0;
   height: 0;
   border-top: 13px solid transparent;
   border-right: 26px solid red;
   border-bottom: 13px solid transparent;
}

.linker
{
  font-size : 20px;
  font-color: black;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="shiva"><span class="count">200</span></div>
<div id="shiva"><span class="count">10000</span></div>
<div id="shiva"><span class="count">8530</span></div>
<div id="shiva"><span class="count">1540</span></div>
<div id="shiva"><span class="count">10</span></div>
<div id="shiva"><span class="count">87</span></div>
<div style="clear:both"></div>
<div id="talkbubble"><span class="count">1421</span></div>
<div id="talkbubble"><span class="count">145</span></div>
<div id="talkbubble"><span class="count">78</span></div>
<br />
<br />
<a class="linker" href="http://www.i-visionblog.com/2014/11/jquery-animated-number-counter-from-zero-to-value-jquery-animation.html"  target="_blank">visit Tutorial in Blog</a>
<br />

Answer 3

$('.count').each(function () {
$(this).prop('Counter',0).animate({
    Counter: $(this).text()
}, {
    duration: 4000,
    easing: 'swing',
    step: function (now) {
now = Number(Math.ceil(now)).toLocaleString('en');
        $(this).text(now);
    }
   });
});

Answer 4

我需要一些与你想要的东西非常相似的东西，除了我需要能够动画美元和美分的变化（类似于Turbotax计数器）。我无法在网上找到任何有用的东西，所以我从SO的几个例子中一起攻击了这个。关键是使用步骤回调函数来根据需要格式化值。无论你是在价值上涨还是下跌，这都很有用。

希望此代码可以帮助您。

<div id="total">$9.99</div>

<script>

//NOTE: Always work with currency in total value in cents, 
//hence the need for .toMoney() and .fromMoney()

var $total     = jQuery("#total");
var finaltotal = 29999; //$299.99
var currval    = $total.text().fromMoney(); 

//only animate if the values are different
if(currval !== finaltotal) {

    console.log("start: " + currval);
    console.log("end:   " + finaltotal);

    $({"counter": currval })
        .animate({ counter: finaltotal },
            { 
                duration: 500,
                easing: "swing",
                step: function() { 
                    $total.text( this.counter.toMoney() ); 
                },
                complete: function() {

                    //animate is a bit off more often than not.
                    //Nobody will notice if the animation happens quickly
                    //so after the animate is done we slam in the final value.

                    $total.text( finaltotal.toMoney() );
                    console.log("animate complete");
                }
            });
}


//Convert a currency string (with or without dollar sign or commas) 
//to an integer representing total value in cents
//E.g.: $149.99 becomes 14999
String.prototype.fromMoney = function() {
    return parseInt(this.replace(/^\$/,'').replace(/,/g, '').replace(/\./, ''));
}

//Convert a given integer representing only cents ($149.99 = 14999) to a
//proper, comma delimited US dollar amount with the dollar sign
//Modern browsers from IE 11 onward support 
//foo.toLocaleString("en-US", {style:"currency", currency:"USD"});
//but the method below works for most older browsers.
//Found on SO @ http://stackoverflow.com/questions/149055/how-can-i-format-numbers-as-money-in-javascript
Number.prototype.toMoney = function(c, d, t) {
var n = this/100, 
    c = isNaN(c = Math.abs(c)) ? 2 : c, 
    d = d == undefined ? "." : d, 
    t = t == undefined ? "," : t, 
    s = n < 0 ? "-" : "", 
    i = parseInt(n = Math.abs(+n || 0).toFixed(c)) + "", 
    j = (j = i.length) > 3 ? j % 3 : 0;

    return s + "$" + (j ? i.substr(0, j) + t : "") + i.substr(j).replace(/(\d{3}) (?=\d)/g, "$1" + t) + (c ? d + Math.abs(n - i).toFixed(c).slice(2) : "");
}

</script>

Answer 5

您可以像这样在步进动画的末尾格式化整个字符串：

$('.count').each(function () {
        var obj = $(this);
        jQuery({Counter: 0}).animate({Counter: obj.attr('data-stop')}, {
            duration: 1000,
            easing: 'swing',
            step: function (now) {
                obj.text(Math.ceil(now));
            },
            complete : function(){
                obj.text(Math.ceil(obj.text()).toLocaleString('en'));
            }
        })
    });

（我使用了香卡的剧本jQuery Count Numbers Up）

用逗号动画计数器从零开始

5 个答案: