I am an potato!.

2 minute read

초기 화면

image-20210712201044276

html 부분

<div class="clock">
  <div class="clock-face">
    <div class="hand hour-hand"></div>
    <div class="hand min-hand"></div>
    <div class="hand second-hand"></div>
  </div>
</div>

시계바늘 움직이기

시계바늘을 움직일 수 있는 방법을 찾아보니 css 함수중 retateZ()라는 것이 있다는 것을 발견하였다. (참조 rotateZ())

예시 코드 실행 화면
transform: rotateZ(0) - 0도 회전 image-20210712201509812
transform: rotateZ(90deg); - 90도 회전 image-20210712201526026

즉 deg가 ..도를 의미한다는것을 할수있다.

따라서

  • 1시간 = 30도
  • 5분 = 30도, 1분 = 6도
  • 1초 = 6도

현재시간으로 시계 설정하기

  1. 먼저 현재 시각을 js에서 알아온다.

    var today = new Date();

//1시간 = 30도 ,1분 = 6도,1초 = 6도
var h =
  today.getHours() > 12
    ? (today.getHours() - 12) * 30
    : today.getHours() * 30; //Date 객체의 시 (0~23)
var m = today.getMinutes() * 6; //Date 객체의 분 (0~59)
var s = today.getSeconds() * 6; //Date 객체의 초 (0~59)

  2. 현재 시각에 따라 시,분,초침의 각도를 설정해준다.

    const hh = document.querySelector(".hour-hand");
const mh = document.querySelector(".min-hand");
const sh = document.querySelector(".second-hand");

hh.style.transform = `rotateZ(${h}deg)`;
mh.style.transform = `rotateZ(${m}deg)`;
sh.style.transform = `rotateZ(${s}deg)`;

  3. 결과

    image-20210712204100560

  • 시게바늘의 위치가 중앙에서 시작해야하는데 그냥 제자리에서 각도만 변하게되는 문제가 생겼다.

따라서 시계바늘이 중앙에서 돌수있도록 구심점을 잡아주어야한다.

` transform-origin:100%;`을 사용하여 구심점을 잡아준다. transform-origin

  • 또한 12시 시작이 아닌 9시부터 시작되는 문제가 발생했다.

     var s = (today.getSeconds()/60 )*360 +90;   //Date 객체의 초 (0~59)
  var m = (today.getMinutes()/60 )*360 +90;   //Date 객체의 분 (0~59)
  var h = (today.getHours() /12 )*360 +90;   //Date 객체의 시 (0~23)

    위처럼 각도에 90을 더해 문제를 해결하였다.

결과

image-20210712210800118

1초마다 시간을 재설정

일정시간마다 함수를 반복실행하기 위해 setInterval()를 사용한다.

사용 방법 : setInterval(function() { ... }, 지연시간);

최종 코드

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>JS + CSS Clock</title>
  </head>
  <body>
    <div class="clock">
      <div class="clock-face">
        <div class="hand hour-hand"></div>
        <div class="hand min-hand"></div>
        <div class="hand second-hand"></div>
      </div>
    </div>

    <style>
      html {
        background: #018ded url(https://unsplash.it/1500/1000?image=881&blur=5);
        background-size: cover;
        font-family: "helvetica neue";
        text-align: center;
        font-size: 10px;
      }

      body {
        margin: 0;
        font-size: 2rem;
        display: flex;
        flex: 1;
        min-height: 100vh;
        align-items: center;
      }

      .clock {
        width: 30rem;
        height: 30rem;
        border: 20px solid white;
        border-radius: 50%;
        margin: 50px auto;
        position: relative;
        padding: 2rem;
        box-shadow: 0 0 0 4px rgba(0, 0, 0, 0.1), inset 0 0 0 3px #efefef,
          inset 0 0 10px black, 0 0 10px rgba(0, 0, 0, 0.2);
      }

      .clock-face {
        position: relative;
        width: 100%;
        height: 100%;
        transform: translateY(
          -3px
        ); /* account for the height of the clock hands */
      }

      .hand {
        width: 50%;
        height: 6px;
        background: black;
        position: absolute;
        top: 50%;
        transform-origin: 100%;
        /* transform: rotate(90deg); */
      }
      .hour-hand {
        background-color: darksalmon;
      }
      .min-hand {
        background-color: #018ded;
      }
      .second-hand {
        background-color: black;
      }
    </style>

    <script>
      function setTime() {
        var today = new Date();
        //1시간 = 30도 ,1분 = 6도,1초 = 6도
        var s = (today.getSeconds() / 60) * 360 + 90; //Date 객체의 초 (0~59)
        var m = (today.getMinutes() / 60) * 360 + 90; //Date 객체의 분 (0~59)
        var h = (today.getHours() / 12) * 360 + 90; //Date 객체의 시 (0~23)

        const hh = document.querySelector(".hour-hand");
        const mh = document.querySelector(".min-hand");
        const sh = document.querySelector(".second-hand");

        console.log(h, m, s);
        hh.style.transform = `rotateZ(${h}deg)`;
        mh.style.transform = `rotateZ(${m}deg)`;
        sh.style.transform = `rotateZ(${s}deg)`;
      }
      setTime();
      setInterval(setTime, 1000);
    </script>
  </body>
</html>

You may also enjoy