2. CSS + JS Clock ( JavaScript30 )

Dev/JavaScript30

2. CSS + JS Clock ( JavaScript30 )

takeU 2021. 7. 7. 12:57

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

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

</body>
</html>

목표

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

과정

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. 시계바늘 현재 시간에 맞게 설정

const 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 속성을 삽입해줌
setInterval로 setDate를 1000ms(1초) 마다 실행한다는 뜻
마지막 코드 setDate()는 켰을 때 바로 함수 한번 실행함을 나타내고,
그 뒤부터는 setInterval이 1초마다 실행해줌

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

transform-origin - 변형 효과를 줄 때 원점을 지정해줌
transform: rotate() - 원점으로부터 회전 각도를 설정할 때 사용

저작자표시 비영리 변경금지

현재글2. CSS + JS Clock ( JavaScript30 )

takeU