【问题标题】:jQuery animated number counter from zero to value - counter shows wrong value when a value is hundreds of thousandsjQuery动画数字计数器从零到值 - 当值是数十万时,计数器显示错误值
【发布时间】:2020-02-12 04:37:59
【问题描述】:

我尝试借助以下 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。

从零到值的计数器适用于以千计的较小值。

【问题讨论】:

    标签: javascript jquery html animation each


    【解决方案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)
    }
    

    【讨论】:

      【解决方案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>

      希望对你有帮助,

      【讨论】:

      • $('.count').each(function () { $(this).prop('Counter', 0).animate({ Counter: $(this).data('value ') }, { 持续时间: 3000, 缓动: 'swing', step: function (now) { $(this).text(Math.ceil(now)); } }); });实际上这对我来说很好。我使用数据值来解决这个问题。
      • 感谢您的回复 Miroslav Glamuzina。
      猜你喜欢
      • 1970-01-01
      • 1970-01-01
      • 2023-04-02
      • 2022-08-17
      • 1970-01-01
      • 1970-01-01
      • 2023-03-16
      • 1970-01-01
      • 1970-01-01
      相关资源
      最近更新 更多