Javascript30 - CSS + JS CLOCK

CSS + JS CLOCK

요구사항

1. 실제 시계처럼 동작하게 만들기

---

1. HTML 구성

- clock 안에 clock-face가 있고 그 안에 초침,분침,시침이 있다.

    <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>

 

2. CSS 구성

- body클래스에서 시계를 중앙으로 위치시키고 clock클래스에서 시계의 모양,그림자를 그린다.

- hand 클래스에서 position:absolute로 해서 시침,분침,초침을 겹치게 놓은 후 transform-origin:right으로 해서 사각형의 오른쪽 선을 기준으로 회전하게 한다.

    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);
    }

    .hand {
      width: 50%;
      height: 6px;
      background: black;
      position: absolute;
      top: 50%;
      transform-origin:right;
      transform:rotate(90deg);
    }
   

 

3. Javscript 구성

- 초침,분침,시침을 불러온 후에 시침,분침,초침을 회전시키는 setclock함수를 1초에 한번 호출하게 작성한다.

    const secondHand = document.querySelector('.second-hand');
    const minuteHand = document.querySelector('.min-hand');
    const hourHand = document.querySelector('.hour-hand');
    function setclock() {
      let date = new Date();
      secondHand.style.transform = `rotate(${90+date.getSeconds()*6}deg)`;
      minuteHand.style.transform = `rotate(${90+date.getMinutes()*6+date.getSeconds()/60}deg)`;
      hourHand.style.transform = `rotate(${90+date.getHours()*30+date.getMinutes()/2}deg)`;
      console.log(date.getHours());
      console.log(date.getMinutes());
      console.log(date.getUTCHours());
      
    }
    
    setInterval(setclock,1000);
    setclock();