特定の日時までの時間をカウントダウンするJavaScript

2022/01/22に公開約1,100字

Count Down JavaScript

カイジのソシャゲのHPで適当にネットで拾ってきたスクリプトをそのままコピペしているというのが話題になっていたので、自分ならどういう風に実装するのかやってみました。

https://twitter.com/Teruta11/status/1484449933067309056?s=20

HTML

<div id="container">
  2023年1月1日まで残り
  <span class="num"></span><span class="num"></span>時間
  <span class="num"></span><span class="num"></span></div>

CSS

.num {
  font-size: 30px;
}

JavaScript

{
  const update = () => {
    // 日本時間の timezone 付きで指定
    const targetTime = new Date('2023-01-01T00:00+09:00').getTime();
    const diff = targetTime - Date.now();
    const numbers = [
      diff / 1000 / 60 / 60 / 24,
      (diff / 1000 / 60 / 60) % 24,
      (diff / 1000 / 60) % 60,
      (diff / 1000) % 60,
    ];
    Array.from(document.querySelectorAll('#container > .num'), (elm, i) => {
      elm.textContent = `${Math.floor(numbers[i])}`.padStart(2, 0);
    });
  };
  update();
  setInterval(update, 1000);
}

動くサンプル

https://runstant.com/simiraaaa/projects/0d3c4e0d

PS: この記事のコードはコピペしても良いです。間違ってたらすみません。

Discussion

ログインするとコメントできます