【JavaScript】特定の数値までカウントアップさせる方法

2022年5月6日JavaScript

JavaScriptで特定の数値までカウントアップさせる方法を紹介します。

特定の数値までカウントアップさせるデモ

See the Pen
javascript-特定の数値までのカウントアップ by Sosak (@Sosak2021)
on CodePen.

JavaScriptコードの解説

const btn = document.querySelector("button");
const counters = document.querySelectorAll(".counter");

btn.addEventListener("click", setCounter, false);

function setCounter() {
  counters.forEach((counter) => {
    // 初期値を設定
    counter.innerText = "0";

    const updateCounter = () => {
      // data属性の値を取得
      const targetNum = +counter.getAttribute("data-target");
      // テキストに挿入する変数(+で数値に変換)
      const displayNum = +counter.innerText;
      // スピードの設定
      const SPEED = 250;
      // 増加を定義
      const increment = targetNum / SPEED;

      // ターゲットに到達していない場合
      if (displayNum < targetNum) {
        // 整数に変換して挿入
        counter.innerText = `${Math.ceil(displayNum + increment)}`;
        setTimeout(updateCounter, 1);
      } else {
        counter.innerText = targetNum;
      }
    };

    // 処理が終わるまで呼び出す
    updateCounter();
  });
}

setCounter()関数の中身について説明します。
htmlにターゲットとなる数値をデータ属性にセットします。
そのデータ属性の値をJavaScriptで取得して、その値になるまでsetTimeoutを走らせてカウントを増加させています。

増加スピードの設定については、ターゲットの数値を割ることで調整できます。
あとはsetTimeoutの呼び出しの時間を変更しても増加スピードを変更することは可能です。
if文でターゲットの数値になったら処理が止まるようにすれば、特定の数値までカウントアップさせることができます。
setTimeoutの使い方については、JavaScriptのsetInterval()とsetTimeout()を使い方を参照してみてください。