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?
Tats_innit
Working Demo 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 :)
Code
// 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;
}
**output*
You should also add a complete function as such:
step:function(){
//..
},
complete:function(){
$el.text(commaSeparateNumber(Math.round(this.someValue)));
}
Updated Fiddle: Demo
来源:https://stackoverflow.com/questions/16227858/how-to-increment-number-using-animate-with-comma-using-jquery