ブログにデジタル時計を置いてみようと思い、作ってみました。

現在時計はとっぱらってしまいましたが、コードは残しておきます。

See the Pen clock by hiro (@hirochanpon) on CodePen.

以下コピペで動きます。時計っぽい外観としました。

<div id="digital-clock" style="font-family: 'Courier New', monospace; font-size: 2em; background: #333; color: #0f0; padding: 10px 20px; display: inline-block; border-radius: 8px;"></div>

<script>
  function updateClock() {
    const now = new Date();
    const hours = String(now.getHours()).padStart(2, '0');
    const minutes = String(now.getMinutes()).padStart(2, '0');
    const seconds = String(now.getSeconds()).padStart(2, '0');
    const timeString = `${hours}:${minutes}:${seconds}`;
    document.getElementById('digital-clock').textContent = timeString;
  }

  updateClock(); // 初回呼び出し
  setInterval(updateClock, 1000); // 毎秒更新
</script>

使い道がこまるかもしれませんが・・・。よろしくお願いします。