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

Question

我尝试借助以下 URL 为数字设置动画：jQuery animated number counter from zero to value 并遵循以下代码：

$('.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>

希望对你有帮助，