Javascript jQuery动画数字计数器从零到值-当值为几十万时,计数器显示错误的值
我曾尝试通过以下URL为数字设置动画:并遵循以下代码:Javascript jQuery动画数字计数器从零到值-当值为几十万时,计数器显示错误的值,javascript,jquery,html,animation,each,Javascript,Jquery,Html,Animation,Each,我曾尝试通过以下URL为数字设置动画:并遵循以下代码: $('.count').each(function () { $(this).prop('Counter',0).animate({ Counter: $(this).text() }, { duration: 3000, easing: 'swing', step: function (now) { $(this).text(Math.ce
$('.count').each(function () {
$(this).prop('Counter',0).animate({
Counter: $(this).text()
}, {
duration: 3000,
easing: 'swing',
step: function (now) {
$(this).text(Math.ceil(now));
}
});
});
问题是,我给了一个数字800000,以在数字计数器中递增。此值随机递增,然后再次递减为0。例如,在将值增加到800000之后,它将再次设置动画以返回到值0
零对值计数器对于以千为单位的较小值工作正常。类似的功能应该可以实现
$('.count')。每个(函数(){
$(此).prop('Counter',8000)
.制作动画({
计数器:$(this.text())
}, {
时长:3000,
放松:"摇摆",,
步骤:功能(现在,a){
$(this.text)(8000-~~ this.Counter);
}
});
});代码>
0
在研究如何做时,我意识到堆栈中的所有解决方案都使用jquery。现在我在项目中编写native(vanillajs),我的解决方案如下
var getCountItems=document.querySelectorAll('.countitem');
如果(getCountItems){
getCountItems.forEach(函数(countItem){
var counterValueElement=countItem.querySelector('strong');
var storeCurrentValue=parseInt(counterValueElement.textContent);
var fromZero=0;
如果(从零开始===0){
counterValueElement.textContent=“0”;
}
setInterval(函数(){
if(++fromZero$('.count').each(函数(){$(this.prop('Counter',0')).animate({Counter:$(this.data('value'))},{duration:3000,easing:'swing',step:function(now){$(this.text(Math.ceil(now));}});});实际上这对我来说很好。我用数据值来解决这个问题。谢谢你的回复Miroslav Glamuzina。