시간과 날짜표기

프최's log·2020년 10월 3일
0

Javascript

목록 보기
26/26
post-custom-banner

Date Constructor

 Date 생성자는 시간의 특정 지점을 나타내는 Date 객체를 생성한다. 별도의 인수를 전달하지 않는다면 현재 날짜와 시간을 가지는 인스턴스를 반환한다.

const date = new Date();
console.log(date); 
//Sat Oct 03 2020 21:34:03 GMT+0900 (대한민국 표준시)

  년도와 일은 초기 정수값이 1로 시작되어 비교할 때 헷갈림이 없지만, 월(month)의 경우, 인덱스로 0부터 11까지로 표현되므로 내가 1월을 생각해서 1를 넣으면 month의 인덱스가 1인 2월이 표기된다.

month = [ 1(Jan), 2(Feb), 3(Mar), 4(Apr), 5(May), 6(Jun), 7(Jul), 8(Aug), 9(Sep), 10(Oct), 11(Nov), 12(Dec) ]

month[0] = 1(Jan);

스트링 자체로 넣어서 해결하는 방법도 있지만,
배열 및 쉼표로 구분하는 경우 해당 매개변수를 '인덱스'로 인지하는 점을 깨달을 수 있었다.

현재 날짜 /시간 알기에 대한 자세한 내용 표기 사이트
날짜와 시간을 위한 Date 객체

현재 시간/날짜 좀더 쉽게 얻기

toLocaleString 을 통해 현재 시간과 날짜를 손쉽게 얻을 수 있다. 사용자의 문화권에 맞는 시간표기법으로 객체의 시간을 리턴하는데 Date와 Time으로도 얻어낼 수 있다.

let nowDate = new Date().toLocaleDateString().replaceAll(".","").split(" ").join("/")

nowDate; // "2020/10/3"

let nowTime = new Date().toLocaleTimeString().slice(0,7)

nowTime // "오후 9:54"

Date Example

현재 날짜와 시간을 초단위로 반복출력하는 예제는 이 사이트의 코드를 가져왔다.

(function printNow() {
  const today = new Date();

  const dayNames = ['(일요일)', '(월요일)', '(화요일)', '(수요일)', '(목요일)', '(금요일)', '(토요일)'];
  // getDay: 해당 요일(0 ~ 6)를 나타내는 정수를 반환한다.
  const day = dayNames[today.getDay()];

  const year = today.getFullYear();
  const month = today.getMonth() + 1;
  const date = today.getDate();
  let hour = today.getHours();
  let minute = today.getMinutes();
  let second = today.getSeconds();
  const ampm = hour >= 12 ? 'PM' : 'AM';

  // 12시간제로 변경
  hour %= 12;
  hour = hour || 12; // 0 => 12

  // 10미만인 분과 초를 2자리로 변경
  minute = minute < 10 ? '0' + minute : minute;
  second = second < 10 ? '0' + second : second;

  const now = `${year}${month}${date}${day} ${hour}:${minute}:${second} ${ampm}`;

  console.log(now);
  setTimeout(printNow, 1000);
}());

2.시간 지연(delay)

  • setTimeout()
    • 구문 : setTimeout(callback, millisecond);
  • clearInterval(timerId)
    • setTimeout 타이머 종료
  • setInterval
    • 구문 : setTimeout(callback, millisecond);
  • clearInterval(timerId)
    -반복 실행 중인 타이머 종료

참조사이트

profile
차곡차곡 쌓아가는 나의 개발 기록
post-custom-banner

0개의 댓글