날짜나 시간 관련 정보를 제공받고 싶을 때는 날짜 객체(Date Object)를 생성함 . 날짜 정보 객체는 날짜와 관련된 작업을 할 때 유용한 객체이다.
현재 날짜의 정보를 제공하는 Date 객체는 다음과 같이 생성
기본형 | 참조변수=new Date();
ex) var t = new Date();
특정 날짜의 정보를 제공하는 Date 객체는 다음과 같이 생성
기본형 | 참조변수=new Date("연/월/일");
ex) var t = new Date("1995/5/31");
기본형 | 참조변수=new Date(연, 월-1, 일);
ex) var t = new Date(1995,4,31);
생성된 날짜 객체에 사용할 수 있는 메서드 (GET/SET)
날짜 정보를 가져올 때(GET) | 날짜 정보를 수정할 때(SET) | ||
getFullYear() | 연도 정보를 가져옴 | setFullYear() | 연도 정보만 수정함 |
getMonth() | 월 정보를 가져옴(현재 월-1) | setMonth() | 월정보만 수정함(월 -1 ) |
getDate() | 일 정보를 가져옴 | setDate() | 일 정보만 수정함 |
getDay() | 요일 정보를 가져옴(일:0~토:6) | '요일'은 날짜를 바꾸면 자동으로 바뀌므로 setDay()는 없음 | |
getHours() | 시 정보를 가져옴 | setHours() | 시 정보만 수정함 |
getMinutes() | 분 정보를 가져옴 | setMinutes() | 분 정보만 수정함 |
getSeconds() | 초 정보를 가져옴 | setSeconds() | 초 정보만 수정함 |
getMilliseconds() | 밀리초 정보를 가져옴 | setMilliseconds() | 밀리초 정보만 수정함 |
getTime() | 1970년 1월 1일부터 경과된 시간을 밀리초로 표기함 | setTime() | 1970년 1월 1일부터 경과된 시간을 밀리초로 수정함 |
toGMTString() | GMT 표준 표기 방식으로 문자형 데이터로 반환함 | toLocaleString() | 운영 시스템 표기 방식으로 문자형 데이터로 반환함 |
<script>
var today = new Date();
var nowMonth = today.getMonth(),
nowDate = today.getDate(),
nowDay = today.getDay();
/*
현재 월 nowMonth
현재 일 nowDate
현재 요일 nowDay
*/
var birth = newDate(1995,4,31);
var theMonth = birth.getMonth(),
theDate = birth.getDate(),
theDay = birth.getDay();
/*
생일 월 theMonth (5)
생일 일 theDate (31)
생일요일 theDay
*/
</script>
현재 날짜로부터 특정 날짜까지 며칠이 남았는지 구하는 형식은 다음과 같음. 남은 일수는 밀리초 단위로 계산
더보기
남은 일 수(밀리초) = 특정 날짜 객체 - 현재 날짜 객체
다음은 밀리초로 계산한 시간값을 나타낸 것
더보기
1초 = 1,000(msc)
1분(60초) = 1,000 * 60 = 60,000(msc)
1시간(60분) = 1,000 * 60 * 60 = 3,600,000(msc)
1일(60분*24) = 1,000 * 60 * 60 * 24 = 86,400,000(msc)
현재 날짜부터 연말까지 며칠이 남았는지 날짜 정보 객체를 이용하여 코딩해보기 (D-DAY 계산법)
<script>
var today = new Date();
var nowYear = today.getfullYear();
var theDate = new Date(nowYear,11,31); //11은 12월을 뜻함
var diffDate = theDate.getTime() - today.getTime();
//남은 날 = 특정 날짜 - 현재날짜
var result = Math.ceil(diffDate / (60 * 1000 * 60 * 24) ;
document.write ("연말 D-day: " + result + "일 남았습니다.");
</script>
반응형
'LANGUAGE > JAVASCRIPT' 카테고리의 다른 글
d3.js Scatter-Plot (산포도 그래프) (2) | 2023.02.06 |
---|---|
d3.js 사용법 - ⑤ bat chart의 rect 클릭 이벤트 (13) | 2022.11.15 |
javascript<객체> 내장객체, 브라우저객체모델, 문서객체모델 (1) | 2022.11.13 |
d3.js 사용법 - ④ bar chart에 tooltip 그리기(mouseover) (2) | 2022.11.11 |
d3.js 사용법 - ③ bar chart에 click 이벤트 추가 (0) | 2022.11.09 |