Javascript30 - Day02

CSS + JS Clock

Date()

Javascript MDN Date()

• 메소드가 정말 다양하게 많이 있는데 주로 get으로 시작하는 메소드와 set으로 시작하는 메소드로 구성되어 있다.
• 시간, 분, 초 등의 날짜 정보를 가져오거나 내가 변수의 날짜 정보를 변경하는 메소드를 구분해서 사용 할 수 있다.

#사용
const date = new Date(); # returns a new Date object
const [month, day, year]       = [date.getMonth(), date.getDate(), date.getFullYear()];
const [hour, minutes, seconds] = [date.getHours(), date.getMinutes(), date.getSeconds()];

SetInterval

Javascript MDN setInterval()

함수를 반복적으로 수행하거나 호출할때, 매번 호출시마다 일정 시간을 연기하는 메소드

• 각 인터벌 고유의 인터벌 Id를 가지고 있어서 clearInterval() 메소드를 호출함으로써 제거할 수 있다.
• delay 의 단위는 milliseconds
• setInterval을 제거하기 위해 clearInterval을 사용하고, setTimeout을 제거하기 위해 celarTimeout을 사용한다.
• 첫번째 변수에 실행할 함수나 코드를 적는다.

#사용
var intervalID = setInterval(func, [delay, arg1, arg2, ...]);
var intervalID = setInterval(function[, delay]);
var intervalID = setInterval(code, [delay]);

transform : rotate(deg)

CSS MDN trnasform

CSS의 transform 프로퍼티는 회전, 크기변경, skew(찌그러트리기), trnaslate(위치변경)을 제공한다.

#사용
transform: rotate(45deg);
transform: rotate(3.1416rad);
transform: rotate(-50grad);
transform: rotate(1.75turn);