計數器設置動畫

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: function(now) { 
    $(this).text(Math.ceil(now).toLocaleString('en')); 
} 

您也可以通過在navigator.language而不是「恩」和小數將顯示根據用戶的瀏覽器語言設置。

Answer 2

它可以使用與正則表達式一個替代來實現：

$(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; 
 
\t height: 100px; 
 
\t background: red; 
 
\t -moz-border-radius: 50px; 
 
\t -webkit-border-radius: 50px; 
 
\t 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>