アナログ時計 - W&M de Asobo

アナログ時計

2021・05・14

＊アナログ時計機能です＊

時間を数値で表示させるだけでなく、プログラムで現在の時刻を取得した上で時針、分針、秒針がリアルタイムで動くアナログ時計にしてみました。時計の針の他に、時刻の目安となる線や数字も付けています。なお、この JavaScriptプログラムは、

『JavaScript コードレシピ集』
技術評論社
株式会社ICS　池田泰延，鹿野壮　著

を参考にさせて頂きました。（めっちゃおすすめの本です！）

使用機能：CSS・JavaScript

上記のサンプルコードを掲載しています。学習用としてご自由にコピペしてお使い下さい。（※スクロールできます）

HTML・CSS・JavaScript

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="utf-8"/>
  <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
  <style>
    .outline {
      font-family:"游ゴシック体 Medium","游ゴシック体","游ゴシック Medium","Yu Gothic","YuGothic",sans-serif;
      display: flex;
      justify-content: center;
    }
    .outclock {
      padding: 25px;
      border-radius: 50%;
      border: solid 3px darkblue;
      width: 300px;
      height: 300px;
      background-color: rgba(255,255,255,0.1);
      position: relative;
    }
    .lineHour1 {
      width: 10px;
      height: 300px;
      background-color: darkblue;
      position: absolute;
      left: calc(50% - 5px);
    }
    .lineHour2 {
      width: 10px;
      height: 300px;
      background-color: darkblue;
      position: absolute;
      left: calc(50% - 5px);
      transform: rotate(90deg);
    }
    .lineMin1 {
      width: 4px;
      height: 300px;
      background-color: darkblue;
      position: absolute;
      left: calc(50% - 2px);
      transform: rotate(45deg);
    }
    .lineMin2 {
      width: 4px;
      height: 300px;
      background-color: darkblue;
      position: absolute;
      left: calc(50% - 2px);
      transform: rotate(65deg);
    }
    .lineMin3 {
      width: 4px;
      height: 300px;
      background-color: darkblue;
      position: absolute;
      left: calc(50% - 2px);
      transform: rotate(25deg);
    }
    .lineMin4 {
      width: 4px;
      height: 300px;
      background-color: darkblue;
      position: absolute;
      left: calc(50% - 2px);
      transform: rotate(-45deg);
    }
    .lineMin5 {
      width: 4px;
      height: 300px;
      background-color: darkblue;
      position: absolute;
      left: calc(50% - 2px);
      transform: rotate(-65deg);
    }
    .lineMin6 {
      width: 4px;
      height: 300px;
      background-color: darkblue;
      position: absolute;
      left: calc(50% - 2px);
      transform: rotate(-25deg);
    }
    .twelve {
      font-size: 24px;
      position: absolute;
      color: darkblue;
      left: calc(50% - 14px);
      top: -30px;
    }
    .three {
      font-size: 24px;
      position: absolute;
      color: darkblue;
      right: 5px;
      top: calc(50% - 42px);
    }
    .nine {
      font-size: 24px;
      position: absolute;
      color: darkblue;
      left: 5px;
      top: calc(50% - 42px);
    }
    .six {
      font-size: 24px;
      position: absolute;
      color: darkblue;
      left: calc(50% - 6px);
      bottom: -30px;
    }

    .clock {
      padding: 20px;
      border-radius: 50%;
      width: 200px;
      height: 200px;
      background: white;
      position: relative;
      top: 50%;
      left: 50%;
      transform: translate(-50%,15%);
    }

    .lineHour {
      width: 10px;
      height: 80px;
      background: darkblue;
      position: absolute;
      top: calc(50% - 80px);
      left: calc(50% - 5px);
      transform-origin: bottom;
    }

    .lineMin {
      width: 4px;
      height: 100px;
      background: darkblue;
      position: absolute;
      left: calc(50% - 2px);
      transform-origin: bottom;
    }

    .lineSec {
      width: 2px;
      height: 100px;
      background: #cccccc;
      position: absolute;
      left: calc(50% - 1px);
      transform-origin: bottom;
    }

  </style>
</head>
<body>
<div class="outline">
  <div class="outclock">
     <div class="lineHour1"></div>
     <div class="lineHour2"></div>

     <div class="lineMin1"></div>
     <div class="lineMin2"></div>
     <div class="lineMin3"></div>
     <div class="lineMin4"></div>
     <div class="lineMin5"></div>
     <div class="lineMin6"></div>
     <p class="twelve">12</p>
     <p class="three">3</p>
     <p class="six">6</p>
     <p class="nine">9</p>
    <main class="centering">
      <div class="clock">
       <div class="lineHour"></div>
       <div class="lineMin"></div>
       <div class="lineSec"></div>
     </div>
     </main>
  </div>
</div>
<script type="text/javascript">
  {
    setInterval(() => {
      // 現在時間
      const now = new Date();

      // 時間の数値
      const h = now.getHours(); // 時間
      const m = now.getMinutes(); // 分
      const s = now.getSeconds(); // 秒

      // 針の角度に反映

      // 短針
      const degH = h * (360 / 12) + m * (360 / 12 / 60);
      // 分針
      const degM = m * (360 / 60);
      // 秒針
      const degS = s * (360 / 60);

      const elementH = document.querySelector('.lineHour');
      const elementM = document.querySelector('.lineMin');
      const elementS = document.querySelector('.lineSec');

      elementH.style.transform = `rotate(${degH}deg)`;
      elementM.style.transform = `rotate(${degM}deg)`;
      elementS.style.transform = `rotate(${degS}deg)`;
    }, 50);
  }
</script>
</body>
</html>

« 前の記事へ次の記事へ »