02.JS css clock

현재시간을 받아와 시계로 표시하는 것

CSS

transform-origin: 오른쪽을 기준으로 변형시 원점을 잡아주는 것

transition-timing-function : 요소의 움직임 기능을 정의하는 것
// ++트랜지션 효과가 진행되는 동안의 변화를 지정하는 것

속성	설명
linear	처음 속도 = 마지막 속도
ease	처음 속도 느림 > 빠름 > 느림
ease-in	속도 느림(천천히) > 정상 속도
ease-out	정상 속도 > 느리게(천천히) 끝남
ease-in-out	천천히 시작 > 정상 속도 > 느려짐
step-start	애니메이션을 시작점에서만 표현 ~~뭔가 픽셀 단위로 보이는 느낌? ~~
step-end	애니메이션을 끝점에서만 표현
steps(int, start or end)	애니메이션을 단계별로 설정
📌 cublic-bezier (n,n,n,n)	배지어 곡선 값을 만들어서 속도 설정 (++ 전환 시작 과 끝까지 속도를 제어하는데 사용되는 것)

JS

setInterval :: 자바스크립트의 주기적인 실행 일정 시간 간격으로 작업수행
ㄴ 일정 시간 간격으로 실행되는 작업 시간 < setInterval 진행 시간 보다 작아야함

중간 커밋

<script>
    const secondHand = document.querySelector(".second-hand");
    const minsHand = document.querySelector(".min-hand");
    const hourHand = document.querySelector(".hour-hand");
    //초,분,시
    
    function setDate() {
      const now = new Date(); // 현재 시간

      const seconde = now.getSeconds(); // now에서 second 가져오기
      const secondsDegrees = (seconde / 60) * 360 + 90; 
      // 초 위치 구하기 :: 현재 초 / 60 값을 360(100%)로 곱하고 시작점인 90 더하기
      secondHand.style.transform = `rotate(${secondsDegrees}deg)`;
      //초침의 위치 > style.transform으로 위치값 변환
      
      const mins = now.getMinutes();
      const minsDegrees = (mins / 60) * 360 + 90;
      minHand.style.transform = `rotate(${minsDegrees}deg)`;

      const hour = now.getHours();
      const hourDegrees = (hour / 12) * 360 + 90;
      //시간의 100% > 12
      hourHand.style.transform = `rotate(${hourDegrees}deg)`;
    }
    setInterval(setDate, 1000); // 1초마다 setDate 실행 
    
    setDate();
    // 우선 실행
</script>

콜백함수
다른 코드의 인수로 넘겨주는 실행 가능한 코드로 데이터가 로직을 수행하는 것입니다 여기서는 setDate가 계산되는 동안 다음 단계로 넘어 갈 수 있기 때문에 그걸 막고자 하단에 setIterval을 실행 후 setDate를 미리 읽을 수 있도록 하단에 setDate()를 기수하였다

get- 날짜 함수
날짜 데이터에서 필요한 형식만 갖고 오늘 함수

• getFullYear() :: yyyy
• getMonth() :: mm
• getDate() :: dd
• getDay() :: 0~6(일~토)
• getHours(), getMinutes(), getSeconds()
• getMilliseconde() :: mmm

중간 커밋

   <script>
     const secondHand = document.querySelector(".second-hand");
     const minHand = document.querySelector(".min-hand");
     const hourHand = document.querySelector(".hour-hand");

     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 + 90;
       const minsDegrees = (mins / 60) * 360 + (seconds / 60) * 6 + 90;
       minHand.style.transform = `rotate(${minsDegrees}deg)`;

       const hour = now.getHours();
       //const hourDegrees = (hour / 12) * 360 + 90;
       const hourDegrees = (hour / 12) * 360 + (mins / 60) * 30 + 90;
       hourHand.style.transform = `rotate(${hourDegrees}deg)`;
     }
     setInterval(setDate, 1000);
     
     setDate();
   </script>

마지막 커밋

삼항 연산자
조건 ? 조건식이 True인 경우 실행(반환할 값) : False인 경우 실행(반환할 값)

const hourDegrees = hour > 12 ? ((hour - 12) / 12) * 360 + 90 : (hour / 12) * 360 + 90;