Let’s build a CSS + JS Clock

element.style {
    transform: rotate(330deg);
}

transform: rotate는 중심을 축으로 회전한다. (default)

transform-origin

transform-origin: 50%	// default
transform-origin: 100%

transform-origin 은 회전 축을 나타낸다. transform-origin: 100%로 바꾸면 pivot 즉 회전 축을 오른쪽 끝으로 이동시킬 수 있다.

.hand {
      width: 50%;
      height: 6px;
      background: black;
      position: absolute;
      top: 50%;
      transform-origin: 100%;
      transform: rotate(90deg);
      transition: 0.5s;
    }

transition 을 추가하면 0.5s 동안 이동을 실시한다.

transition-timing-function

	  transition: all 0.05s;
      transition-timing-function: cubic-bezier(0, 0.47, 0.22, 1.75);

시계처럼 tik하는 느낌을 주기위해 timing-function을 추가한다.

web-browser에서 여러 timing-function들을 직접 확인하고 세세한 값들을 변경하고 인자들을 바로 복사해올 수 있다.

그리고 transition시간을 0.05s 로 줄이면 더욱 더 tik-tok 효과를 느낄 수 있다.

clock.js

function setDate() {
    console.log("Hi");
}

setInterval(setDate, 1000);

setInterval 첫번째 인자에 handler와 두번째 인자에는 ms단위를 넣는다.

    const now = new Date();
    const seconds = now.getSeconds();
    const secondsDegrees = 90 + seconds * 6;

시간 계산 및 세팅

const secondHand = document.querySelector(`.second-hand`);
// 전역변수로는 사용이 안된다.

function getSecondHand() {
    return document.querySelector(`.second-hand`);
}
// 함수로 반환한다.

모듈에서 사용하기 위해 함수로 element 반환

getSecondHand().style.transform = `rotate(${secondsDegrees}deg)`;

element의 css 수정할 때에는 항상 &{}을 이용하여 가져온다!

    const now = new Date();
    const hours = now.getHours();
    const minutes = now.getMinutes();
    const seconds = now.getSeconds();
    const hoursDegrees = 90 + ((hours / 12) * 360);
    const minuteDegrees = 90 + ((minutes / 60) * 360);
    const secondsDegrees = 90 + ((seconds / 60) * 360);
    
	getHourHand().style.transform = `rotate(${hoursDegrees}deg)`;
    getMinuteHand().style.transform = `rotate(${minuteDegrees}deg)`;
    getSecondHand().style.transform = `rotate(${secondsDegrees}deg)`;

각 hand 별 시간 계산을 해준다.

function getHandfrom(time) {
    let TimeHand = {
        "hour" : document.querySelector(`.hour-hand`),
        "minute" : document.querySelector(`.min-hand`),
        "second" : document.querySelector(`.second-hand`)
    }
    return TimeHand[time]
}

...
    getHandfrom('hour').style.transform = `rotate(${hoursDegrees}deg)`;
    getHandfrom('minute').style.transform = `rotate(${minuteDegrees}deg)`;
    getHandfrom('second').style.transform = `rotate(${secondsDegrees}deg)`;

리팩토링 작업으로 객체를 만들어서 여러 element 반환을 처리했다.

댓글남기기