⏰

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

2022/01/22に公開

CSS

Count Down JavaScript

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

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);
}

動くサンプル

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

HTML

CSS

JavaScript

動くサンプル

Discussion