Time 함수

Interval

• 매 2초마다, 매 1분마다, 특정 시간 간격마다 무슨 일이 일어나게 하고 싶을 때 사용

• 첫 번째 argument는 실행하고자 하는 함수 / 두 번째 argument는 호출되는 함수 간격을 몇 ms로 할 것인지

const clock = document.querySelector('h2#clock');

function sayHello() {
  console.log('hello');
}

setInterval(sayHello, 5000);

• 5초 뒤에 콘솔에서 hello를 볼 수 있고 5초마다 반복한다.
  

Timeout

• 첫 번째 argument는 실행하고자 하는 함수 / 두 번째 argument는 호출되는 함수를 얼마나 몇 ms 기다릴 것인지

Date 함수

종류

Date.prototype.getDate()
Date에서 현지 시간 기준 일(1–31)을 반환합니다.

Date.prototype.getDay()
Date에서 현지 시간 기준 요일(0–6)을 반환합니다.

Date.prototype.getFullYear()
Date에서 현지 시간 기준 연도(네 자리 연도면 네 자리로)를 반환합니다.

Date.prototype.getHours()
Date에서 현지 시간 기준 시(0–23)를 반환합니다.

Date.prototype.getMinutes()
Date에서 현지 시간 기준 분(0–59)을 반환합니다.

Date.prototype.getMonth()
Date에서 현지 시간 기준 월(0–11)을 반환합니다.

Date.prototype.getSeconds()
Date에서 현지 시간 기준 초(0–59)를 반환합니다.

function getClock() {
  const HH = new Date().getHours();
  const MM = new Date().getMinutes();
  const SS = new Date().getSeconds();

 
  clock.innerText = `${HH} : ${MM} : ${SS}`;
}

getClock() // 웹사이트에 바로 보이게 
setInterval(getClock, 1000);

웹사이트에 접속 했을 때 바로 보이는 시계 만들기

초 두 자리수로 고치기

• string을 두 자리수로 고쳐보자
• padstart 사용하기

padStart() 메서드는 현재 문자열의 시작을 다른 문자열로 채워, 주어진 길이를 만족하는 새로운 문자열을 반환합니다. 채워넣기는 대상 문자열의 시작(좌측)부터 적용됩니다.

 const SS = String(new Date().getSeconds()).padStart(2, '0');

• String 타입으로 바꿔준 뒤에 padStart() 적용
• 두 자리, 채워넣을 문자 "0"

과제 풀이

const clockTitle = document.querySelector(".js-clock");

function getClock() {
  const setDate = new Date("2022-12-25T00:00:00");
  const newDate = new Date();

  const result = setDate - newDate;

  console.log(result);

  const SS = Math.floor((result / 1000) % 60);
  const MM = Math.floor((result / 1000 / 60) % 60);
  const HH = Math.floor(result / 1000 / 60 / 60) % 24;
  const dd = Math.floor(result / 1000 / 60 / 60 / 24);

  clockTitle.innerText = `${dd}d ${HH}h ${MM}mm ${SS}s`;
}

getClock(); // 바로 보이게
setInterval(getClock, 1000);

1) 크리스마스의 시간
2) 현재 시간
3) 크리스마스 시간 - 현재 시간
4) 결과를 일/시/분/초 로 분리