触发多个JS计数器的问题

Question

我有一些带有空跨度的 div，它们旨在启动计数器，计数到指定的数字。我从网上获取了一些代码（我不太擅长 JS）并使其适用于第一个 div，但我不知道如何在剩余的 div 上循环（？）。

let counts = setInterval(updated, 100);
let upto = 0;

function updated() {
  let count = document.getElementById("counter-1");
  count.innerHTML = ++upto;
  if (upto === 100) {
    clearInterval(counts);
  }
}

.various__item--skill-quantity {
  color: black;
  transition: all 0.5s;
  margin: 0 5%;
}

<div class="various__item--skills-quantity" id="counter-1"><span></span></div>
<div class="various__item--skills-quantity" id="counter-2"><span></span></div>
<div class="various__item--skills-quantity" id="counter-3"><span></span></div>
<div class="various__item--skills-quantity" id="counter-14"><span></span></div>

Answer 1

首先，这是 Web 上 js 的文档：https://developer.mozilla.org/en-US/docs/Web/JavaScript

我强烈建议为其添加书签并仔细阅读。

循环的一种方法是通过类名收集/定义 NodeList 并按您的方式进行操作： https://developer.mozilla.org/en-US/docs/Web/API/Document/querySelectorAll

let nodeList = document.querySelectorAll('.various__item--skills-quantity')

您可以使用不同的方法来循环它。一个基本但很好的方法是“for...of”循环 https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/for...of

for (n of nodeList) {
  n.innerHTML = ++upto;
}

当你循环时，n是你的节点/元素/div

let counts = setInterval(updated, 100);
let upto = 0;

function updated() {
  let nodeList = document.querySelectorAll('.various__item--skills-quantity');
  for (n of nodeList) {
    n.innerHTML = ++upto;
    if (upto === 100) {
      clearInterval(counts);
    }
  }
}

.various__item--skill-quantity {
  color: black;
  transition: all 0.5s;
  margin: 0 5%;
}

<div class="various__item--skills-quantity" id="counter-1"><span></span></div>
<div class="various__item--skills-quantity" id="counter-2"><span></span></div>
<div class="various__item--skills-quantity" id="counter-3"><span></span></div>
<div class="various__item--skills-quantity" id="counter-14"><span></span></div>

此示例有效，但当计数达到 100 时它会停止运行。

希望这有帮助！

Answer 2

这是解决此问题的函数式方法。

首先，您需要立即访问所有计时器。获得计时器元素后，您可以初始化它们。您可以使用数据属性来跟踪每个计时器的状态。

使用

Math.sign

，您可以确定计时器的方向。

const counters = [...document.querySelectorAll('.counter')];
let intervalId;

startCounters();

function startCounters() {
  console.log('Starting timers...');
  initializeCounters();
  intervalId = setInterval(updateCounters, 1000);
}

function initializeCounters() {
  for (let counter of counters) {
    counter.dataset.countStart = getCounterStart(counter);
    counter.dataset.countEnd = getCounterEnd(counter);
    counter.dataset.countValue = counter.textContent = getCounterValue(counter);
  }
}

function updateCounters() {
  let isDone = true;
  for (let counter of counters) {
    if (counter.dataset.isDone) {
      continue;
    }
    const start = getCounterStart(counter);
    const end = getCounterEnd(counter);
    const direction = Math.sign(end - start);
    const value = getCounterValue(counter) + direction;
    counter.textContent = value;
    if (direction > 0 ? value >= end : value <= end) {
      counter.dataset.isDone = true;
      continue;
    }
    counter.dataset.countValue = value;
    isDone = false;
  }
  if (isDone) {
    clearInterval(intervalId);
    intervalId = undefined;
    console.log('All timers have stopped');
  }
}

function getCounterStart(counterEl) {
  return +(counterEl.dataset.countStart ?? 0);
}

function getCounterEnd(counterEl) {
  return +(counterEl.dataset.countEnd ?? 0);
}

function getCounterValue(counterEl) {
  return +(counterEl.dataset.countValue ?? getCounterStart(counterEl));
}

<div class="counter" data-count-start="0" data-count-end="1"></div>
<div class="counter" data-count-start="0" data-count-end="2"></div>
<div class="counter" data-count-start="0" data-count-end="3"></div>
<div class="counter" data-count-start="0" data-count-end="14"></div>
<div class="counter" data-count-start="10" data-count-end="0"></div>