在动画计数函数中添加逗号
Adding commas to animated counting function
我已经尝试了所有可以在网上找到的关于此的内容,但它们似乎都处理静态数字,而不是动画数字。
是否可以通过修改此函数使用它在数字增加时将逗号添加到我的值中?
$('.counter').each(function() {
var $this = $(this),
countTo = $this.attr('data-count');
$({ countNum: $this.text()}).animate({
countNum: countTo
},
{
duration: 500,
easing:'linear',
step: function() {
$this.text(Math.floor(this.countNum));
},
complete: function() {
$this.text(this.countNum);
//alert('finished');
}
});
只需在当前设置元素的位置添加逗号 text()
。
取自 add commas to a number in jQuery
的逗号代码
$('.counter').each(function() {
var $this = $(this),
countTo = $this.attr('data-count');
$({
countNum: $this.text()
}).animate({
countNum: countTo
},
{
duration: 5000,
easing: 'linear',
step: function() {
$this.text(commaSeparateNumber(Math.floor(this.countNum)));
},
complete: function() {
$this.text(commaSeparateNumber(this.countNum));
//alert('finished');
}
}
);
});
function commaSeparateNumber(val) {
while (/(\d+)(\d{3})/.test(val.toString())) {
val = val.toString().replace(/(\d+)(\d{3})/, '' + ',' + '');
}
return val;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<span class="counter" data-count="1000000"></span>
如果字符串包含逗号,则使用parseFloat
。
请检查下面的工作代码
$('.counter').each(function() {
$(this).prop('Counter', 0).animate({
Counter: parseFloat($(this).text().replace(/,/g, ''))
}, {
duration: 10000,
easing: 'swing',
step: function(now) {
$(this).text(getRupeesFormat(Math.ceil(now)));
}
});
});
function getRupeesFormat(val) {
while (/(\d+)(\d{3})/.test(val.toString())) {
val = val.toString().replace(/(\d+)(\d{3})/, '' + ',' + '');
}
return val;
}
我已经尝试了所有可以在网上找到的关于此的内容,但它们似乎都处理静态数字,而不是动画数字。
是否可以通过修改此函数使用它在数字增加时将逗号添加到我的值中?
$('.counter').each(function() {
var $this = $(this),
countTo = $this.attr('data-count');
$({ countNum: $this.text()}).animate({
countNum: countTo
},
{
duration: 500,
easing:'linear',
step: function() {
$this.text(Math.floor(this.countNum));
},
complete: function() {
$this.text(this.countNum);
//alert('finished');
}
});
只需在当前设置元素的位置添加逗号 text()
。
取自 add commas to a number in jQuery
的逗号代码$('.counter').each(function() {
var $this = $(this),
countTo = $this.attr('data-count');
$({
countNum: $this.text()
}).animate({
countNum: countTo
},
{
duration: 5000,
easing: 'linear',
step: function() {
$this.text(commaSeparateNumber(Math.floor(this.countNum)));
},
complete: function() {
$this.text(commaSeparateNumber(this.countNum));
//alert('finished');
}
}
);
});
function commaSeparateNumber(val) {
while (/(\d+)(\d{3})/.test(val.toString())) {
val = val.toString().replace(/(\d+)(\d{3})/, '' + ',' + '');
}
return val;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<span class="counter" data-count="1000000"></span>
如果字符串包含逗号,则使用parseFloat
。
请检查下面的工作代码
$('.counter').each(function() {
$(this).prop('Counter', 0).animate({
Counter: parseFloat($(this).text().replace(/,/g, ''))
}, {
duration: 10000,
easing: 'swing',
step: function(now) {
$(this).text(getRupeesFormat(Math.ceil(now)));
}
});
});
function getRupeesFormat(val) {
while (/(\d+)(\d{3})/.test(val.toString())) {
val = val.toString().replace(/(\d+)(\d{3})/, '' + ',' + '');
}
return val;
}