jQuery 动画数字计数器从零到值 - 当值为数十万时，计数器显示错误值

Question

我尝试借助此URL对数字进行动画处理：jQuery动画数字计数器从零到值，并遵循以下代码：

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

问题是，我在数字计数器中给出了一个数字 800 000 来递增。随机地，此值递增并再次递减为 0。例如，在将值增加到 800 000 后，它再次以动画形式恢复到值 0。

零到值的计数器对于以千为单位的较小值工作正常。

Answer 1

在研究如何做到这一点时，我意识到堆栈中的所有解决方案都使用 jquery。现在我在项目中编写本机(vanillajs(，我的解决方案如下。

var getCountItems = document.querySelectorAll('.count-item');
if(getCountItems){
getCountItems.forEach(function (countItem) {
var counterValueElement = countItem.querySelector('strong');
var storeCurrentValue = parseInt(counterValueElement.textContent);
var fromZero = 0;
if(fromZero === 0){
counterValueElement.textContent = "0";
}
setInterval(function () {
if(++fromZero <= storeCurrentValue){
counterValueElement.textContent = fromZero.toString();
}
}, 15); // set your speed (decrease)
});
}

section#countdown{
margin: 50px 0;
width: 100%;
color: #1C1E23;
}
section#countdown h3{
font-size: 28px;
text-align: center;
position: relative;
padding-bottom: 20px;
}
section#countdown h3:after{
content: ' ';
position: absolute;
bottom: 0;
left: 10%;
height: 1px;
width: 80%;
background: rgba(28, 30, 35, 0.44);
}
section#countdown .count-item{
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
text-align: center;
font-size: 24px;
color: rgba(28, 30, 35, 0.7);
margin: 15px 0;
/* set your anim count text for "all" */
transition: all .3s ease, color .4s ease-in;
}
section#countdown .count-item:hover{
transform: scale(1.25);
color: #C22429;
}
section#countdown .count-item span{
font-size: 18px;
color: rgba(28, 30, 35, 0.44);
}
@media only screen and (max-width: 992px){
section#countdown h3 + div{
flex-direction: column;
}
section#countdown .count-item{
transform: scale(1.5);
margin: 30px 0;
}
}

<section id="countdown" class="box-p">
<h3>STATISTICS</h3>
<div class="d-flex align-items-center justify-content-around">
<div class="count-item">
<strong>47</strong>
<span>YEAR EXPERIENCE</span>
</div>
<div class="count-item">
<strong>100</strong>
<span>EXPORT COUNTRIES</span>
</div>
<div class="count-item">
<strong>200</strong>
<span>BRANDS</span>
</div>
<div class="count-item">
<strong>500</strong>
<span>EMPLOYEE</span>
</div>
<div class="count-item">
<strong>7</strong>
<span>SUB BRANDS</span>
</div>
<div class="count-item">
<strong>2</strong>
<span>FACTORY</span>
</div>
</div>
</section>

更新

在代码下方添加了纯JS版本;

var getCountItems = document.getElementsByClassName('count-item');
for(var i = 0; i < getCountItems.length; i++){
let item = getCountItems[i];
let counterValueElement = item.children[0]; // strong
let storeCurrentValue = parseInt(counterValueElement.textContent);
let fromZero = 0;
setInterval(function () {
if(fromZero <= storeCurrentValue){
counterValueElement.textContent = (fromZero++).toString();
}
}, 15); // set your speed (decrease)
}

Answer 2

这样的事情应该可以解决问题，

$('.count').each(function() {
$(this).prop('Counter', 8000)
.animate({
Counter: $(this).text()
}, {
duration: 3000,
easing: 'swing',
step: function(now, a) {
$(this).text(8000 - ~~this.Counter);
}
});
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<span class='count'>0</span>

希望这有帮助，