如何用JS为多个元素创建一个数字计数器？

Question

我正在尝试创建一个从 0 到 innerHTML 数值的计数器。我让它为第一个元素工作，但无法弄清楚如何跨多个数字元素应用该事件

function animateValue(id, start, end, duration) {

    var range = end - start;

    var current = start;

    var increment = end > start? 1 : -1;

    var stepTime = Math.abs(Math.floor(duration / range));

    var obj = document.querySelectorAll(id);

    var end = obj.innerHTML;

    var timer = setInterval(function() {

        current += increment;

        obj.innerHTML = current;

        if (current == end) {

            clearInterval(timer);

        }

    }, stepTime);

}

animateValue("value", 0, 3000);

.value {

    font-size: 50px;

}

<div class="value">244</div>

<div class="value">64,244</div>

<div class="value">1,100,244</div>

Answer 1

在 JavaScript 中，你不能在不迭代的情况下对多个元素进行更改。所以，你必须animateValue为每个.value元素调用函数。start通常为零，所以你可以把它作为最后一个参数，并给它默认值。而代替innerHTML，利用innerText。两者都会起作用，但它们有自己的作用。function animateValue(item, duration, start = 0) {&nbsp; var end = item.innerText.replaceAll(",", "").trim();&nbsp; var range = end - start;&nbsp; var increment = (range / (duration / 10));&nbsp;&nbsp;&nbsp; if(end < start){&nbsp; &nbsp; increment *= -1;&nbsp; }&nbsp; var current = start;&nbsp; var stepTime = 1;&nbsp;&nbsp;&nbsp; var timer = setInterval(function() {&nbsp; &nbsp; current += Math.ceil(increment);&nbsp; &nbsp; item.innerText = current;&nbsp; &nbsp; if (current >= end) {&nbsp; &nbsp; &nbsp; item.innerText = end;&nbsp; &nbsp; &nbsp; clearInterval(timer);&nbsp; &nbsp; }&nbsp; }, stepTime);}document.querySelectorAll('.value').forEach((item)=>{&nbsp; animateValue(item, 3000);});.value {&nbsp; font-size: 50px;}<div class="value">244</div><div class="value">1,624</div><div class="value">1,100,244</div>