JavaScriptで数字をぱららららっと表示する仕組みをつくる 🎰

抽選した数字を表示する前にランダムを抽選した数字をぱららららっと表示する仕組みを作りました。
ライブラリ不要でさささっと使うためにVanilla JSで書いています。

DEMO

ソースコード

index.js

const p = document.querySelector('p'); // 数字を表示するDOM

selectNumber();
setInterval(selectNumber, 4000); // 4秒に1回表示する数字を抽選する

function selectNumber() {
  const num = 0 | Math.random() * 1001;

  renderNumber(num);
}

async function renderNumber(num) {
  let countLength = 20;

  for (let i = 0; i < countLength; ++i) {
    await new Promise((resolve) => setTimeout(resolve, i * 10));
    p.innerText = String(Math.random() * 2000 | 0).padStart(4, '0');

    if (i === countLength - 1) {
      p.innerText = String(num).padStart(4, '0');
    }
  }
}