如何用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) {

  var end = item.innerText.replaceAll(",", "").trim();

  var range = end - start;

  var increment = (range / (duration / 10));

  

  if(end < start){

    increment *= -1;

  }

  var current = start;

  var stepTime = 1;

  

  var timer = setInterval(function() {

    current += Math.ceil(increment);

    item.innerText = current;

    if (current >= end) {

      item.innerText = end;

      clearInterval(timer);

    }

  }, stepTime);

}

document.querySelectorAll('.value').forEach((item)=>{

  animateValue(item, 3000);

});

.value {

  font-size: 50px;

}

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

<div class="value">1,624</div>

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