CSSClock

1
2
3
4
5
6
7
8
9
10
11
.hand {
  transform: rotate(90deg); /*시계 방향으로 90도 회전*/
  transform-origin: 100%; /*기준점의 오른쪽 끝으로해서 돌아간다.*/
  transition: 0.05s; /*transition-duration: 트랜지션이 일어나는 지속 시간*/
  transition-timing-function: cubic-bezier(
    0.61,
    -0.21,
    1,
    -0.68
  ); /*시간에 따른 파라미터 값의 변화율을 명시하는 함수, transition의 속도를 조절합니다.*/
}

transform (변형)

transform 속성을 사용하여 요소의 스타일을 자유롭게 바꿀수 있습니다.

  • 해당 요소를 움직입니다
  • 해당 요소를 회전시킵니다
  • 해당 요소의 크기를 변경합니다
  • 해당 요소를 기울입니다

transform 메소드

  • translate(x, y) : 현재 위치에서 해당 요소를 주어진 x축과 y축의 거리만큼 이동시킵니다.
  • rotate(Ndeg) : 주어진 각도만큼 시계 방향(양수+)이나 반시계 방향(음수-)으로 회전시킵니다.
  • scale(x, y) : 요소의 크기를 주어진 배율만큼 늘리거나 줄입니다. 기본값은 1이고, 1보다 크면 크기를 늘리고, 1보다 작으면 크기를 줄입니다.
  • skew(Xdeg, Ydeg) : 주어진 각도 만큼 x, y축 방향으로 기울입니다.
  • matrix() : 모든 2D transform 메소드를 한 줄에 설정할 수 있도록 해줍니다.

translate (전환)

CSS 속성을변경할 때, 변경이 즉시 영향을 미치게 하는 대신 그 속성의 변화가 일정 기간에 걸쳐 일어나도록 할 수 있습니다.

setInterval

1
2
3
4
5
6
const clockSet = () => {
  console.log("hi");
};
// setInterval  타이ㅂ머 식별자를 반환합니다.
// 1초마다 clockSet을 출력합니다.
setInterval(clockSet, 1000);

new Date()

new Date(year, month, day, hour, minutes, seconds, milliseconds) - 년, 월, 일, 시, 분, 초, 밀리초를 직접 입력해서 Date객체를 생성할 수도 있습니다.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
<script>
  // Selector 지정
  const secondHand = document.querySelector(".second-hand");
  const minHand = document.querySelector(".min-hand");
  const hourHand = document.quertSelector("./hour-hand");

  function setDate() {
    // 현재 시각을 나타내는 Date 객체를 반환
    const now = new Date();

    // 초를 리턴하는 메소드
    /*
          현재원의 100% 는 360도
          1시간 => 12칸 , 1분 => 총 60칸 , 1초 => 총 60칸
          (현재 값을 /각칸개수로) * 360 = [전체 기준의 움직이는 간격]
      */
    const seconds = now.getSeconds();
    const secondsDegrees = (seconds / 60) * 360 + 90;
    secondHand.style.transform = `rotate(${secondsDegrees})deg)`;
    console.log(seconds);

    // 12시 기준 90deg에 360 기준으로 60칸이 초는 움직이므로 (초/60) * 360 + 90을 해주면 한칸움직이는 간격을 구할수있다.

    // 분을 리턴하는 메소드
    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;
    hourHand.style.transform = `rotate(${hourDegrees}deg)`;
    x;
  }

  setInterval(setDate, 1000);
</script>