アナログ時計

2024年9月6日

インターネットの情報を使ってアナログ時計を作成しました。

HTML、CSS、JavaScriptの情報はネットの情報ほとんどそのままです。

ちゃんとWordPressでも動くんだなと感激しています。

アナログ　時計

12 3 6 9

コード

<div class="container">
  <div class="edge-clock">
    <span class="clock-hour"></span>
    <span class="clock-min"></span>
    <span class="clock-sec"></span>
    <span class="clock-12">12</span>
    <span class="clock-3">3</span>
    <span class="clock-6">6</span>
    <span class="clock-9">9</span>
  </div>
</div>

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

.edge-clock {
  position: relative;
  width: 400px;
  height: 400px;
  border: 4px solid black;
  background-color: silver;
  border-radius: 50%;
}

.clock-12 {
  position: absolute;
  top: 3%;
  left: 45%;
}

.clock-3 {
  position: absolute;
  top: 43%;
  left: 90%;
}

.clock-6 {
  position: absolute;
  top: 87%;
  left: 47%;
}

.clock-9 {
  position: absolute;
  top: 43%;
  left: 3%;
}

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

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

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

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

  const degreeHour = hour / 12 * 360;
  const degreeMin = minute / 60 * 360;
  const degreeSec = second / 60 * 360;

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

  clockHour.style.setProperty('transform', `rotate(${degreeHour}deg)`);
  clockMin.style.setProperty('transform', `rotate(${degreeMin}deg)`);
  clockSec.style.setProperty('transform', `rotate(${degreeSec}deg)`);
}

setInterval(getElements, 10);

よかったらシェアしてね！