CSS + JS Clock

자바스크립트로 현재시간 받을 수 있는건 알았지만
CSS로 아날로그 시계를 구현할 수 있어서 신기했다
자바스크립트공부를 하려고 시작했는데 CSS도 많이 알게 되는것 같음

기본 코드

<!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(http://unsplash.it/1500/1000?image=881&blur=50);
      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%;
    }
  </style>

  <script>
  </script>
</body>
</html>

목표

현재 시간을 아날로그 시계로 구현

과정

  1. 시계바늘 중심위치 잡기, 효과 적용
  2. 시계바늘 변수로 등록
  3. 시계바늘 현재 시간에 맞게 설정

코드 분석

  1. 시계바늘 중심위치 잡기, 효과 적용

    .hand {
     transform-origin: 100%;
     transform: rotate(90deg);
     transition: all 0.05s;
     transition-timing-function: cubic-bezier(0.1, 2.7, 0.58, 1);
    }
    

    transform - 변형 효과를 줄 때 기준 설정
    hand 클래스에 위의 코드를 추가해
    기준축을 100% 즉 가장 오른쪽으로 잡고, 방향을 90도만큼 돌려서
    시침, 분침, 초침이 12시 방향에 있도록 바꿔줌
    transition - 변형 효과를 줄 때 효과 설정
    all 0.05s - 모든곳에 효과를 주며 0.05초에 실행완료하겠다
    transition-timing-function: cubic-bezier(0.1, 2.7, 0.58, 1) - 속성의 중간값을 계산하는 방법을 정의하며 cubic-bezier는 가장 많이 사용되는 속성으로 네 점에 의해 정의되며, 그래프로 제공해서 명시할 수 있음
    괄호안의 값은 대충 그래프로 시계 움직임처럼 찍은 값을 적은것

  2. 시계바늘을 변수로 등록

    const secondHand = document.querySelector('.second-hand');
    const minsHand = document.querySelector('.min-hand');
    const hourHand = document.querySelector('.hour-hand');
    

    세개의 바늘을 HTML요소에서 클래스로 찾아서 변수로 등록

  3. 시계바늘을 현재 시간에 맞게 설정

    function setDate() {
     const now = new Date();
    
     const seconds = now.getSeconds();
     const secondsDegrees = ((seconds / 60) * 360) + 90;
     secondHand.style.transform = `rotate(${secondsDegrees}deg)`;
    
     const mins = now.getMinutes();
     const minsDegrees = ((mins / 60) * 360) + ((seconds/60)*6) + 90;
     minsHand.style.transform = `rotate(${minsDegrees}deg)`;
    
     const hour = now.getHours();
     const hourDegrees = ((hour / 12) * 360) + ((mins/60)*30) + 90;
     hourHand.style.transform = `rotate(${hourDegrees}deg)`;
    
    setInterval(setDate, 1000);
    setDate();
    }
    

    setDate라는 함수에 현재 시간에 대한 정보를 담는 now라는 변수를 만들고
    초, 분, 시 단위로 변수를 만들어 시간에 맞게 돌아가도록 각도를 계산해주고
    각 시계바늘에 transform: rotate 속성을 삽입해줌
    이때 각도 조절값은 곰곰이 생각해보시길..(적기가 넘나힘든것)
    setIntervalsetDate를 1000ms(1초) 마다 실행한다는 뜻
    마지막 코드 setDate()는 켰을 때 바로 함수 한번 실행함을 나타내고,
    그 뒤부터는 위의 setInterval이 1초마다 실행해줌

찾아본 내용, 알게된 내용들

transform-origin - 변형 효과를 줄 때 원점을 지정해줌
transform: rotate() - 원점으로부터 회전 각도를 설정할 때 사용
transition - 변형 효과를 줄때 애니메이션 속도를 조절할 때 사용
setInterval - 특정 시간마다 함수를 실행할 때 사용

끝!

'개발 > JavaScript30' 카테고리의 다른 글

5. Flex Panel Gallery  (0) 2017.04.05
4. Array Cardio Day 1  (0) 2017.04.04
3. CSS Variables  (0) 2017.04.03
2. CSS + JS Clock  (0) 2017.04.03
1. JavaScript Drum Kit  (0) 2017.03.30
0. JavaScript30 Challenge  (0) 2017.03.30

+ Recent posts