如何使用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中，您不能在不迭代的情况下对多个元素进行更改。因此，您必须为每个.value元素调用animateValue函数。start通常为零，所以您可以将其作为最后一个参数，并为其指定默认值。并用innerText代替innerHTML。两者都会起作用，但也有各自的作用。

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>