ひとりでのアプリ開発 - fineの備忘録 -

ひとりでアプリ開発をするなかで起こったことや学んだことを書き溜めていきます

Web開発 - JavaScript：デジタル時計を作ってみる

Web開発

初めに

　本記事は、デジタル時計をHTML、CSS、JavaScriptで作成したときのコードをまとめます。JavaScript の Date オブジェクトの使い方を学ぶには良い題材だと思います。

Index

完成図


コード全文

（HTML）

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>デジタル時計</title>
</head>
<body>
  <link href="https://fonts.googleapis.com/css2?family=Orbitron&display=swap" rel="stylesheet">
  <div id="clock">
    <div class="date"><span class="year">0000</span>/<span class="month">00</span>/<span class="day">00</span>(<span class="weekday">日</span>)</div>
    <div class="time">
      <span class="hour">00</span>:<span class="minute">00</span>:<span class="second">00</span>
    </div>
  </div>

  <script src="clock.js"></script>
</body>
</html>

（CSS）

body {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100vh;
  margin: 0;
  background-color: #222;
  color: #fff;
  font-family: "Orbitron", sans-serif;
}

#clock {
  font-size: 2.5em; /* 全体的なフォントサイズを大きく */
  text-align: center;
  background-color: #333;
  padding: 20px; /* 全体的なパディングを大きく */
  border-radius: 10px; /* 全体的な角の丸みを大きく */
  box-shadow: 0 0 15px rgba(0, 0, 0, 0.7); /* 影も大きく */
}

.date,
.time {
  display: block; /* 西暦、月、日付、曜日と時間を２行に分ける */
  margin-bottom: 15px; /* 間隔を広く */
}

.year,
.month,
.day,
.weekday,
.hour,
.minute,
.second {
  padding: 8px; /* パディングを大きく */
  background-color: #444;
  border-radius: 6px; /* 角の丸みを大きく */
  margin: 0 5px; /* 間隔を広く */
}

/* フォントサイズを調整 */
.date {
  font-size: 0.8em; /* 西暦、月、日付、曜日のフォントサイズを大きく */
}

span {
  display: inline-block;
}

（JavaScript）

function updateTime() {
  // 現在時刻を取得
  const now = new Date();

  // 時刻を文字列に変換
  const hour = now.getHours().toString().padStart(2, "0");
  const minute = now.getMinutes().toString().padStart(2, "0");
  const second = now.getSeconds().toString().padStart(2, "0");

  // 表示を更新
  document.querySelector(".hour").textContent = hour;
  document.querySelector(".minute").textContent = minute;
  document.querySelector(".second").textContent = second;
}

function updateDate() {
  // 現在日付を取得
  const now = new Date();

  // 年月日を文字列に変換
  const year = now.getFullYear();
  const month = now.getMonth() + 1;
  const day = now.getDate();
  const weekday = now.getDay();
  const dayOfWeekStr = [ "日", "月", "火", "水", "木", "金", "土" ][weekday];
  
  // 表示を更新
  document.querySelector(".year").textContent = year;
  document.querySelector(".month").textContent = month;
  document.querySelector(".day").textContent = day;
  document.querySelector(".weekday").textContent = dayOfWeekStr;
}

// 1秒ごとに更新
setInterval(updateTime, 1000);
setInterval(updateDate, 1000);

解説

フォント

　フォントは、Orbitronを使用しています。

fonts.google.com

　フォントはHTMLのタグの先頭にリンクを貼り付けることで、CSSから使用できるようになります。

<!-- htmlに記述 -->
<link href="https://fonts.googleapis.com/css2?family=Orbitron&display=swap" rel="stylesheet">

　CSSでは font-family プロパティを使い、フォントを指定します。

body {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100vh;
  margin: 0;
  background-color: #222;
  color: #fff;
  font-family: "Orbitron", sans-serif;
}
Date コンストラクター

　Date() コンストラクターにより、現在の日付と時刻の文字列を取得できます。

  // 現在日付を取得
  const now = new Date();
padStart()
  // 時刻を文字列に変換
  const hour = now.getHours().toString().padStart(2, "0");
  const minute = now.getMinutes().toString().padStart(2, "0");
  const second = now.getSeconds().toString().padStart(2, "0");

　padStart() 関数は、結果の文字列が第１引数で指定した長さになるように第二引数で指定した文字列で延長する関数です。

padStart(targetLength)
padStart(targetLength, padString)

　延長は先頭から適用されるので、上記の場合、1は 01 、5は 05のようになります。

　なお、第二引数は省略可能であり、省略した場合は空白で延長されます。

getMonth() + 1
  const month = now.getMonth() + 1;

　getMonth() 関数は、与えた日付の「月」を表す 0 から 11 までの間の整数値を返します。0 は 1 月、1 は 2 月、11 は 12 月に対応します。

　そのため、+1をしています。

getDay()
  const weekday = now.getDay();
  const dayOfWeekStr = [ "日", "月", "火", "水", "木", "金", "土" ][weekday];

　getDay() 関数は、地方時に基づき、指定された日付の曜日を返します。 0 は日曜日を表します。0 から 6 を曜日に変換するために、曜日の配列を定義し、変換しています。

参考

developer.mozilla.org
developer.mozilla.org

ランキング参加中
プログラミング