【Javascript】アナログ時計の作り方

2024年1月11日

Javascriptには日付や時刻を取得するオブジェクトが用意されています。

今回はDateオブジェクトを使ってJavascriptでアナログ時計っぽいものを作っていきたいと思います。

上記のように毎秒秒針が更新される時計が作れます。

まずHTMLとCSSを準備します。

HTML

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>Analog Clock</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="container">
  <div class="clock">
    <span class="hour"></span>
    <span class="min"></span>
    <span class="sec"></span>
  </div>
</div>
<script src="sctipt.js"></script>
</body>
</html>

hour・ min・secが、それぞれ時針・分針・秒針になります。

CSS

html {
  font-size: 30px;
  color: white;
}

body,html {
  font-family: serif;
}

.container {
  margin: 0 auto;
  width: 400px;
}

.clock {
  position: relative;
  width: 400px;
  height: 400px;
  border: 4px solid #87d500;
  background-color: #fff;
  border-radius: 50%;
}

.hour {
  position: absolute;
  top: calc(50% - 150px);
  left: calc(50% - 5px);
  width: 10px;
  height: 150px;
  background: #87d500;
  transform-origin: bottom;
  transform: rotate(0deg);
}

.min {
  position: absolute;
  top: calc(50% - 180px);
  left: calc(50% - 2px);
  width: 4px;
  height: 180px;
  background: #87d500;
  transform-origin: bottom;
  transform: rotate(0deg);
}

.sec {
  position: absolute;
  top: calc(50% - 200px);
  left: calc(50% - 1px);
  width: 2px;
  height: 200px;
  background: #87d500;
  transform-origin: bottom;
  transform: rotate(0deg);
}

.hour .min, .secのtransform: rotate()が針の傾きになります。

Javascriptで動かすので初期状態は0にしています。

次にjavascriptで動かしていきます。

Javascript

function getElements() {
  const time = new Date();
  const hour = time.getHours();
  const minute = time.getMinutes();
  const second = time.getSeconds();

  const angleHour = hour / 12 * 360;
  const angleMin = minute / 60 * 360;
  const angleSec = second / 60 * 360;

  const clockHour = document.getElementsByClassName('hour')[0];
  const clockMin = document.getElementsByClassName('min')[0];
  const clockSec = document.getElementsByClassName('sec')[0];

  clockHour.style.setProperty('transform', `rotate(${angleHour}deg)`);
  clockMin.style.setProperty('transform', `rotate(${angleMin}deg)`);
  clockSec.style.setProperty('transform', `rotate(${angleSec}deg)`);
}

setInterval(getElements, 1000);

アナログ時計はこれだけで実装可能です。

現在の時・分・秒の値をそれぞれ取得し、それらの時刻を示す針の角度を調整していきます。

現在時刻の取得

const time = new Date();
const hour = time.getHours();
const minute = time.getMinutes();
const second = time.getSeconds();

まずnew Date()でDateオブジェクトを生成します。

Dateオブジェクトには、現在時刻へアクセスするためのメソッドが用意されており

getHours(), getMinutes(), getSecounds()メソッドを用いて時・分・秒を取得します。

針の角度の計算

上記で取得した時刻をそれぞれの針の角度で表示します。

const angleHour = hour / 12 * 360;
const angleMin = minute / 60 * 360;
const angleSec = second / 60 * 360;

針の角度はそれぞれ（時針が通過する箇所の数）*360(円の角度)をかけた値で割って求めます。

時間の場合12、分と秒は60を360でかけた値で求めます。

上記の計算式で求めた値をrotateの値に代入し角度を現在時刻に合わせます。

clockHour.style.setProperty('transform', `rotate(${angleHour}deg)`);
clockMin.style.setProperty('transform', `rotate(${angleMin}deg)`);
clockSec.style.setProperty('transform', `rotate(${angleSec}deg)`);

タイマーの処理

最後に上記の関数を毎秒動かすので

setInterval(getElements, 1000);

setInterval関数を使用し、指定した時間ごとに関数を動かす処理を書きます。

今回の場合毎秒秒針が動くようにしたいので、1秒ごとにgetElements関数を繰り返します。

これでアナログ時計が実装できました。

まとめ

今回はアナログ時計の実装をしました。

まとめるとDateオブジェクトで現在時刻を取得し、その値を使って針の角度を求めます。

それを毎秒更新することによってアナログ時計を実装しています。

スタイル次第でもっといい感じの時計も作れるので色々試してみてください。

ブログ

BLOG

HTML

CSS

Javascript

現在時刻の取得

針の角度の計算

タイマーの処理

まとめ