hyunwkim

Javascript30 - Day2 CSS + VanillaJS Clock

  • 2021년 09월 08일

강의링크

결과물

See the Pen by hyunwk (@hyunwk) on CodePen.

설명

css를 활용하여 시계를 구성한다.

JS를 활용하여 시계의 움직임을 구성한다.

  1. new Date로 now 변수를 만들어 getSeconds, getMinutes, getHours 를 호출한다.

  2. 호출한 값들을 $360^oc$에 비례하도록 변환한다.

  3. class의 이름을 찾아 .style.transform = rotate(deg);를 사용해서 회전 값을 변경한다.

  4. setInterval를 사용하여 매 초마다 함수가 실행되게 한다.

주의사항

  1. transform-origin: 100%; 을 사용하여 시계 침의 회전 중심이 시계 침의 가운데가 아니라 우측 끝점을 기준으로 바꾼다.

  2. secs == 1일 때 degree가 $359^oc$ 에서 $0^oc$로 돌아가므로 그 과정이 transition이 .hand에서 정의한 transition: all 0.05s에 적용되므로 원하는 그림이 나오지 않는다.
    따라서 secs == 0일 때 하단과 같이 transition을 없앤다.

if(secs===0)
        secHand.style.transition = 'none'

code

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

    .hand{
      width: 50%;
      height: 6px;
      background-color: black;
      position: absolute;
      top: 50%;
      transform-origin: 100%;
      transform: rotate(90deg);
      transition: all 0.05s;
      transition-timing-function: cubic-bezier(0.1, 2.7, 0.58, 1);
    }
    
    .minute-hand {
      height: 8px;
    }

    .hour-hand {
      height: 8px;
      width: 30%;
      right: 50%;  
    }
  </style>

  <script>
    'use strict;'
    const secHand = document.querySelector('.second-hand');
    const minHand = document.querySelector('.min-hand');
    const hourHand = document.querySelector('.hour-hand');

    function setDate() {
      const now = new Date();

      const secs = now.getSeconds();
      const secDegrees = ((secs / 60) * 360) + 90;
      secHand.style.transform = `rotate(${secDegrees}deg)`;

      /* prvent weird min, hour change'`` when secs == 0, */
      if(secs==0){
        secHand.style.transitionDuration = '0s';
        minHand.style.transitionDuration = '0s';
        hourHand.style.transitionDuration = '0s';
      } else {
        secHand.style.transitionDuration = '0.05s';
        minHand.style.transitionDuration = '0.05s';
        hourHand.style.transitionDuration = '0.05s';
      }
      
      const mins = now.getMinutes();
      const minDegrees = ((mins / 60) * 360) + ((secs/60)*6) + 90;
      minHand.style.transform = `rotate(${minDegrees}deg)`;
      
      const hours = now.getHours();
      const hourDegrees = ((hours/ 12) * 360) + ((mins/60) *30) + 90;
      hourHand.style.transform = `rotate(${hourDegrees}deg)`;
    }
    setInterval(setDate, 1000);
  </script>
</body>
    © hyunwkim 2021,