时间戳

首页 > 解决方案 > jQuery 动画数字功能。想把它变成 Vanilla JavaScript

javascript - jQuery 动画数字功能。想把它变成 Vanilla JavaScript

问题描述

此函数animates将元素内的数字转换为data-count值内的定义数字

我怎么能在 vanilla JavaScript 中做到这一点

<div class="counter">
    <div class="row no-gutters">
        <div class="col-4">
            <div
                class="single-counter counter-color-1 d-flex align-items-center justify-content-center"
            >
                <div class="counter-items text-center">
                    <span id="count" data-count="175">0</span
                    ><span>K</span>
                    <p>Downloads</p>
                </div>
            </div>
        </div>
        <div class="col-4">
            <div
                class="single-counter counter-color-2 d-flex align-items-center justify-content-center"
            >
                <div class="counter-items text-center">
                    <span id="count" data-count="73">0</span
                    ><span>K</span>
                    <p>Active users</p>
                </div>
            </div>
        </div>
        <div class="col-4">
            <div
                class="single-counter counter-color-3 d-flex align-items-center justify-content-center"
            >
                <div class="counter-items text-center">
                    <span id="count" data-count="4.8">0</span>
                    <p>user rating</p>
                </div>
            </div>
        </div>
    </div>

    $('#count').each(function() {
        var counter = $(this),
            countTo = counter.attr('data-count');

        const countObj = { countNum: counter.text()}

        $(countObj).animate({
            countNum: countTo
        },{

            duration: 2000,
            easing:'linear',
            step: function() {

                counter.text(Math.floor(this.countNum));
            },
            complete: function() {
                counter.text(this.countNum);
            }

        });
    });

我试过这个

countUp(elem) {
    var current = elem.innerHTML;
    var interval = setInterval(increase, 70);
    function increase() {
        elem.innerHTML = current++;
        if (current > elem.getAttribute("data-count")) {
            clearInterval(interval);
        }
    }
}

var span = document.querySelectorAll("#count");
var i = 0;
for (i; i < span.length; i++) {
    countUp(span[i]);
}

但它不会同时完成所有元素动画；具有较低数据计数值的元素比其他具有较高数据计数值的元素更早完成

标签： javascriptjquery

解决方案

element在您的情况下不是选择器。另一个问题是<span>都有重复的 id，即count
我已将这些重复的 id 修改为count1, count2, count3. $('span[id^=count')下面脚本中的选择器表示所有<span>id 以 word 开头的元素count

 $('span[id^=count').each(function() {
        var counter = $(this),
        countTo = counter.attr('data-count');

        const countObj = { countNum: counter.text()}

        $(countObj).animate({
                                countNum: countTo
                            },
                            {
                               duration: 2000,
                               easing:'linear',
                               step: function() {
                                         counter.text(Math.floor(this.countNum));
                                     },
                               complete: function() {
                                         counter.text(this.countNum);
                                     }

                         });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<div class="counter">
  <div class="row no-gutters">
    <div class="col-4">
      <div class="single-counter counter-color-1 d-flex align-items-center justify-content-center">
        <div class="counter-items text-center">
          <span id="count1" data-count="175">0</span><span>K</span>
          <p>Downloads</p>
        </div>
      </div>
    </div>
    <div class="col-4">
      <div class="single-counter counter-color-2 d-flex align-items-center justify-content-center">
        <div class="counter-items text-center">
          <span id="count2" data-count="73">0</span><span>K</span>
          <p>Active users</p>
        </div>
      </div>
    </div>
    <div class="col-4">
      <div class="single-counter counter-color-3 d-flex align-items-center justify-content-center">
        <div class="counter-items text-center">
          <span id="count3" data-count="4.8">0</span>
          <p>user rating</p>
        </div>
      </div>
    </div>
  </div>

编辑：下面是纯香草js函数
你只需要一些基本的数学来决定所有元素的时间间隔

function countUp(elem) {
    var current = elem.innerHTML;

    // assume 2000(milliseconds) is time delay to complete all animations
    // determine time interval based on value of data-count
    var timeIntervalBeforeIncrement = 2000/elem.getAttribute("data-count")


    var interval = setInterval(increase, timeIntervalBeforeIncrement);
    function increase() {
        elem.innerHTML = current++;
        if (current > elem.getAttribute("data-count")) {
            clearInterval(interval);
        }
    }
}

var span = document.querySelectorAll("[id^='count']");


for (i = 0; i < span.length; i++) {
    countUp(span[i]);
}

推荐阅读