[miniP] JS 실습(시계만들기)

노마드 코더 : 초보자를 위한 바닐라 자바스크립트
https://www.youtube.com/watch?v=f0nBj0YMBUI&list=PL7jH19IHhOLM8YwJMTa3UkXZN-LldYnyK&index=22

const clockContainer = document.querySelector(".clock"),
  clockTitle = clockContainer.querySelector(".now"),
  clockLast = clockContainer.querySelector(".last");

function getTime(){
  const date = new Date();
  const minutes = date.getMinutes();
  const hours = date.getHours();
  const seconds = date.getSeconds();
  clockTitle.innerText = `${hours < 10 ? `0${hours}` : hours}:${minutes < 10 ? `0${minutes}` : minutes}:${seconds < 10 ? `0${seconds}` : seconds}`;

}

function initTime(){
  getTime();
  setInterval(getTime, 1000);
}

initTime();

Date.prototype.getTime()

https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Date/setTime

getTime() 메서드는 표준시에 따라 지정된 날짜의 시간에 해당하는 숫자 값을 반환합니다.
이 메서드를 사용하면 다른 Date 객체에 날짜와 시간을 지정할 수 있습니다.
이 메소드는 기능적으로 valueOf() 메소드와 동일합니다.

Syntax

dateObj.getTime()

Return value
1970년 1월 1일 00:00:00 UTC와 주어진 날짜 사이의 경과 시간(밀리 초)을 나타내는 숫자입니다.

날짜 복사에 getTime() 사용
동일한 시간 값으로 날짜 객체를 생성합니다.

// 월은 0부터 시작하여 생일은 1995년 1월 10일이 됩니다.
var birthday = new Date(1994, 12, 10);
var copy = new Date();
copy.setTime(birthday.getTime());

측정 실행 시간
새로 생성 된 Date 객체에서 두 개의 연속 getTime() 호출을 뺀 후에 이 두 호출 사이의 시간 범위를 지정하십시오.
일부 작업의 실행 시간을 계산하는 데 사용할 수 있습니다. 불필요한 Date 객체를 인스턴스화하지 않으러면 Date.now()를 참조하십시오.

var end, start;

start = new Date();
for (var i = 0; i < 1000; i++) {
Math.sqrt(i);
}
end = new Date();

console.log('Operation took ' + (end.getTime() - start.getTime()) + ' msec');

setInterval

https://www.w3schools.com/jsref/met_win_setinterval.asp

• setInterval() 방법은 함수를 호출하거나 지정된 간격(밀리초)에서 식을 평가한다.
• setInterval() 메서드는 clearInterval()이 호출되거나 창이 꺼질 때까지 함수를 계속 호출한다.
• The ID value returned by 'setInterval()' is used as the parameter for the 'clearInterval()' method.

Example

Alert "Hello" every 3 seconds(3000 milliseconds):
setInterval(function(){ alert("Hello"); }, 3000);

getTime을 통해 현재 시간을 가지고 온다.
setInterval을 통해 1초마다 새로 시간을 가져온다.
아...