【JS】デジタル時計（24時間）テンプレート
JavaScriptで現在時刻をリアルタイムに表示する方法
⏰ このテンプレートの用途・メリット
- 現在の時刻をリアルタイムに表示できる
- setIntervalの基本的な使い方が学べる
- イベント無しで自動更新される仕組みを体感
- ブログ・店頭・教育現場などに応用可能
👇こういうやつ👇
--:--:--
📋 コピペして使えるコード
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>現在時刻の表示</title>
<style>
body {
font-family: Arial, sans-serif;
text-align: center;
padding: 20px;
background-color: #f0f0f0;
}
#clock {
font-size: 3rem;
font-weight: bold;
color: #333;
}
</style>
</head>
<body>
<h1>現在の時刻</h1>
<div id="clock">--:--:--</div> <!-- 初期値は「--:--:--」に設定 -->
<script>
setInterval(() => {
const now = new Date();
const hh = now.getHours().toString().padStart(2, '0'); // 時間
const mm = now.getMinutes().toString().padStart(2, '0'); // 分
const ss = now.getSeconds().toString().padStart(2, '0'); // 秒
document.getElementById("clock").textContent = `${hh}:${mm}:${ss}`; // 時刻を表示
}, 1000); // 1秒ごとに更新
</script>
</body>
</html>
🧩 応用と活用方法
このテンプレートは、setInterval(() => {...}, 1000) を使って、1秒ごとに現在時刻を自動更新する仕組みを実現しています。ページをリロードせずに常に正しい時刻が表示されるため、情報端末や店頭モニターなどでリアルタイム表示が必要な場面に最適です。
また、padStart(2, '0') を使うことで、1桁の数字も常に2桁で表示されるようになっており、見た目が整っている点も特徴です。
💡 カスタマイズの例
午前・午後の表示を加えたい場合は、getHours() の値に応じて「AM」「PM」を追加する条件分岐を組み込むと良いでしょう。また、日付や曜日を追加したい場合は、getFullYear() や getDay() を活用できます。
時計のデザインも CSS で簡単に変更可能なので、自分のサイトの雰囲気に合わせて背景色やフォントサイズを調整してみてください。