【JavaScript】アナログ時計の作成方法

2022年5月8日JavaScript

JavaScriptで簡単なアナログ時計の作成方法を紹介します。

アナログ時計のデモ

See the Pen
JavaScript – アナログ時計 by Sosak (@Sosak2021)
on CodePen.

JavaScriptコードの解説

  const hourEl = document.querySelector(".hour");
  const minuteEl = document.querySelector(".minute");
  const secondEl = document.querySelector(".second");
  const timeEl = document.querySelector(".time");
  const dateEl = document.querySelector(".date");
  // 曜日
  const days = [
    "日曜日",
    "月曜日",
    "火曜日",
    "水曜日",
    "木曜日",
    "金曜日",
    "土曜日",
  ];
  // 月
  const months = [
    "1月",
    "2月",
    "3月",
    "4月",
    "5月",
    "6月",
    "7月",
    "8月",
    "9月",
    "10月",
    "11月",
    "12月",
  ];
  
  function setTime() {
    const time = new Date();
    const month = time.getMonth();
    const day = time.getDay();
    const date = time.getDate();
    const hours = time.getHours();
    const clockHours = hours >= 13 ? hours % 12 : hours;
    const minutes = time.getMinutes();
    const seconds = time.getSeconds();
    const ampm = hours >= 12 ? "PM" : "AM";
  
    hourEl.style.transform = `translate(-50%, -100%) rotate(${scale(
      clockHours,
      0,
      12,
      0,
      360
    )}deg)`;
    minuteEl.style.transform = `translate(-50%, -100%) rotate(${scale(
      minutes,
      0,
      60,
      0,
      360
    )}deg)`;
    secondEl.style.transform = `translate(-50%, -100%) rotate(${scale(
      seconds,
      0,
      60,
      0,
      360
    )}deg)`;
  
    timeEl.innerHTML = `${hoursForClock}:${
      minutes < 10 ? `0${minutes}` : minutes } ${ampm}`; dateEl.innerHTML = `${months[month]}${date}日 (${days[day]})`; } // 範囲連動 const scale = (num, in_min, in_max, out_min, out_max) => {
    return ((num - in_min) * (out_max - out_min)) / (in_max - in_min) + out_min;
  };
  
  setTime();
  // １秒毎
  setInterval(setTime, 1000);
  

日時を格納する変数を用意します。
getMonthだけ注意が必要で、indexとして使う分には問題ないのですが、
そのまま使う場合はプラス1する必要があります。
時計の針に関してはrotateをscale関数で操作します。
scaleの最初の値に数値をいれて、in_minとin_maxは時間的な最小値と最大値、out_minとout_maxは、角度の最小値と最大値を入れると範囲を連動させることができます。

1秒ごとに実行したい場合は、setTimeoutではなく、setIntervalを使います。
実際にはsetIntervalの精度の問題もあるため、簡易なアナログ時計程度に使う事ができます。
setIntervalの使い方は、JavaScriptのsetInterval()とsetTimeout()を使い方を参照してみてください。
JavaScriptでの日付の操作方法は、JavaScriptの日付や時間に関するメソッドまとめを参照してみてください。