티스토리 뷰

Javascript

[Javascript] 날짜 객체

날짜 객체

날짜 객체(Data Object)는 날짜와 관련된 객체입니다.

날짜 객체 생성

var 참조 변수 = new Data();

UTC(협정 세계표준시)와 GMT(그리니치 표준시)

UTC(협정 세계표준시)는 1972년 1월 1일부터 시행된 국제 표준시이며, GMT(그리니치 표준시)는 런던을 기점으로 하고, 웰링턴에 종점으로 설정되는 협정 세계시의 기준시간대입니다. UTC와 GMT는 초의 소숫점 단위에서만 차이가 나기 때문에 일상에서는 혼용되어 사용되며, 기술적인 표기에서는 UTC가 사용됩니다.

초 계산

1분 = 1000(msc)
1분(60초) = 1000 * 60 //60,000(msc)
1시간(60분) = 1000 * 60 * 60 //3,600,000(msc)
1일(60분*24) = 1000 * 60 * 60 * 24 //86,400,00(msc)

Date 함수
함수 설명
Date.now 현재 날짜 및 시간의 값을 가져옵니다.
Date.parse 날자를 포함한 문자열 구문을 분석하여 해당 날짜 사이의 시간을 밀리세컨드로 가져옵니다.
Date.UTC UTC(지역표준시) 또는 GMT(그리니치 표준시)의 날짜 사이의 시간을 밀리세컨트로 가져옵니다.
Date 메서드
메서드 설명
getDate() 현재 일 정보를 가져옵니다.
getDay() 현재 월 정보를 가져옵니다.
getFullYear() 현재 년도 정보를 가져옵니다.
getHours() 현재 시 정보를 가져옵니다.
getMilliseconds() 현재 초(1/1000 단위) 정보를 가져옵니다.
getMinutes() 현재 분 정보를 가져옵니다.
getMonth() 현재 월 정보를 가져옵니다.
getSeconds() 현재 초 정보를 가져옵니다.
getTime() 1970년 1월 1일 자정 이후의 초 정보를 밀리세컨드 단위로 가져옵니다.
getTimezoneOffset() 호스트 컴퓨터와 UTC 사이의 시간차를 분으로 가져옵니다.
getUTCDate() UTC를 사용하여 일 정보를 가져옵니다.
getUTCDay() UTC를 사용하여 월 정보를 가져옵니다.
getUTCFullYear() UTC를 사용하여 년도 정보를 가져옵니다.
getUTCHours() UTC를 사용하여 시간 정보를 가져옵니다.
getUTCMilliseconds() UTC를 사용하여 초(1/1000 단위) 정보를 가져옵니다.
getUTCMinutes() UTC를 사용하여 분 정보를 가져옵니다.
getUTCMonth() UTC를 사용하여 월 정보를 가져옵니다.
getUTCSeconds() UTC를 사용하여 초 정보를 가져옵니다.
getYear() 연도 값을 리턴합니다.
setData() 현재 일 정보를 수정합니다.
setFullYear() 현재 년도 정보를 수정합니다.
setHours() 현재 시간 정보를 수정합니다.
setMilliseconds() 현재 초(1/1000단위) 정보를 수정합니다.
setMinutes() 현재 분 정보를 수정합니다.
setMonth() 현재 월 정보를 수정합니다.
setSeconds() 현재 초 정보를 수정합니다.
setTime() 1970년 1월 1일 자정 이후의 초 정보를 밀리세컨드 정보를 수정합니다.
setUTCDate() UTC를 사용하여 일 정보를 수정합니다.
setUTCFullYear() UTC를 사용하여 년도 정보를 수정합니다.
setUTCHours() UTC를 사용하여 시간 정보를 수정합니다.
setUTCMilliseconds() UTC를 사용하여 초(1/1000단위) 정보를 수정합니다.
setUTCMinutes() UTC를 사용하여 분 정보를 수정합니다.
setUTCMonth() UTC를 사용하여 월 정보를 수정합니다.
setUTCSeconds() UTC를 사용하여 초 정보를 수정합니다.
setYear() 로컬 시간을 사용하여 연도 값을 가져옵니다.
toDateString() 날짜를 문자열 값으로 가져옵니다.
toGMTString() GMT를 사용하여 문자열로 변환된 날짜를 가져옵니다.
toISOString() 날짜를 ISO 형식의 문자열 값으로 가져옵니다.
toJSON() JSON serialization 이전에 객체 형식의 날짜를 변환하는데 사용합니다.

Sample1

Date 객체를 이용한 예제입니다.

결과
Fri Aug 23 2019 10:39:11 GMT+0900 (한국 표준시)
현재 월[getMonth()] : 7
현재 일[getDate()] : 23
현재 일[getDay()] : 5
현재 년도[getFullYear()] : 2019
현재 시간[getHours()] : 10
현재 초[getMilliseconds()] : 27
현재 초[getSeconds()] : 11
현재 분[getMinutes()] : 39
현재 초[getTime()] : 1566524351027

날짜 문자열[toDateString()] : Fri Aug 23 2019
날짜 문자열[toGMTString()] : Fri, 23 Aug 2019 01:39:11 GMT
날짜 문자열[toLocaleDateString()] : 2019. 8. 23.
날짜 문자열[toLocaleString()] : 2019. 8. 23. 오전 10:39:11
날짜 문자열[toLocaleTimeString()] : 오전 10:39:11
날짜 문자열[toString()] : Fri Aug 23 2019 10:39:11 GMT+0900 (한국 표준시)
날짜 문자열[toTimeString()] : 10:39:11 GMT+0900 (한국 표준시)
날짜 문자열[toUTCString()] : Fri, 23 Aug 2019 01:39:11 GMT
html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Date()</title>
    <script>
        var today = new Date();                         //날짜 객체를 생성하고 변수에 저장
        var nowMonth = today.getMonth();                //현재 월을 변수에 저장
        var nowDate = today.getDate();                  //현재 일을 변수에 저장
        var nowDay = today.getDay();                    //현재 요일을 변수에 저장
        var nowFullYear = today.getFullYear();          //현재 년도를 변수에 저장
        var nowHours = today.getHours();                //현재 시간을 변수에 저장
        var nowMilliseconds = today.getMilliseconds();  //현재 초(1/1000초 단위)를 변수에 저장
        var nowSeconds = today.getSeconds();            //현재 초를 변수에 저장
        var nowMinutes = today.getMinutes();            //현재 분을 변수에 저장
        var nowTime = today.getTime();                  //1970년 1월 1일 자정 이후의 초 정보를 저장
        
        var nowDateString = today.toDateString();               //날짜를 문자열로 변수에 저장
        var nowGMTString = today.toGMTString();                 //날짜를 문자열로 변수에 저장
        var nowLocaleDateString = today.toLocaleDateString();   //날짜를 문자열로 변수에 저장
        var nowLocaleString = today.toLocaleString();           //날짜를 문자열로 변수에 저장
        var nowLocaleTimeString = today.toLocaleTimeString();   //날짜를 문자열로 변수에 저장
        var nowString = today.toString();                       //날짜를 문자열로 변수에 저장
        var nowTimeString = today.toTimeString();               //날짜를 문자열로 변수에 저장
        var nowUTCString = today.toUTCString();                 //날짜를 문자열로 변수에 저장
        
        document.write(today,"<br>");
        document.write("현재 월[getMonth()] : " + nowMonth,"<br>");
        document.write("현재 일[getDate()] : " + nowDate,"<br>");
        document.write("현재 일[getDay()] : " + nowDay,"<br>");
        document.write("현재 년도[getFullYear()] : " + nowFullYear,"<br>");
        document.write("현재 시간[getHours()] : " + nowHours,"<br>");
        document.write("현재 초[getMilliseconds()] : " + nowMilliseconds,"<br>");
        document.write("현재 초[getSeconds()] : " + nowSeconds,"<br>");
        document.write("현재 분[getMinutes()] : " + nowMinutes,"<br>");
        document.write("현재 초[getTime()] : " + nowTime,"<br><br>");
        
        document.write("날짜 문자열[toDateString()] : " + nowDateString,"<br>");
        document.write("날짜 문자열[toGMTString()] : " + nowGMTString,"<br>");
        document.write("날짜 문자열[toLocaleDateString()] : " + nowLocaleDateString,"<br>");
        document.write("날짜 문자열[toLocaleString()] : " + nowLocaleString,"<br>");
        document.write("날짜 문자열[toLocaleTimeString()] : " + nowLocaleTimeString,"<br>");
        document.write("날짜 문자열[toString()] : " + nowString,"<br>");
        document.write("날짜 문자열[toTimeString()] : " + nowTimeString,"<br>");
        document.write("날짜 문자열[toUTCString()] : " + nowUTCString,"<br>");
    </script>
</head>
<body>
    
</body>
</html>

Sample2

현재 시간을 표현하는 예제입니다.

결과
현재 시간은 :
html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        #clock {position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); font-size: 5vw; white-space: nowrap;}
    </style>
</head>
<body>
    <div id="clock"></div>
    
    <script>
        window.onload = function(){
            var clock = document.getElementById("clock");

            setInterval(function(){
                clock.innerHTML = new Date().toLocaleString();
            },1000);
        };
    </script>
</body>
</html>

Sample3

D-Day를 출력하는 예제입니다.

결과
2019년도 일 밖에 남지 않았군요!
html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>D-Day 구하기</title>
</head>
<body>
   
    <script>
        window.onload = function(){
            var today = new Date();
            var dDay = new Date("December 31, 2019");

            var interval = today.getTime() - dDay.getTime();
            interval = Math.floor(interval / (1000 * 60 * 60 * 24));

            document.write("2019년도" + interval + "일 밖에 남지 않았군요!");
        };
    </script>
</body>
</html>

Sample4

D-Day를 출력하는 예제입니다.

결과

도쿄 올림픽까지

남은 시간은 일 시간 분 초 입니다.

html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>D-Day</title>
</head>
<body>
    
    <h2>도쿄 올림픽까지</h2>
    <p>남은 시간은 
        <span id="day"></span>일
        <span id="hour"></span>시간
        <span id="min"></span>분
        <span id="sec"></span>초 입니다.
    </p>    
    
    <script type="text/javascript">   
        setInterval(function(){
            var today = new Date();
            var goal = new Date(2020, 7, 24);

            var interval = goal.getTime() - today.getTime();
            var days = Math.floor(interval / 1000 / 60 / 60 / 24);
            var hour = Math.floor(interval / 1000 / 60 / 60) % 24;
            var min = Math.floor(interval / 1000 / 60) % 60;
            var sec = Math.floor(interval / 1000 % 60);
            
            document.getElementById('day').innerHTML = days;
            document.getElementById('hour').innerHTML = hour;
            document.getElementById('min').innerHTML = min;
            document.getElementById('sec').innerHTML = sec;
        }, 1000); 
    </script>
</body>
</html>

Sample5

마지막 접속 시간을 출력하는 예제입니다.

결과
당신의 마지막 접속 시간은 :
html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>마지막 접속 시간</title>
</head>
<body>
    <div>당신의 마지막 접속 시간은 : <span id="last"></span></div>
    
    <script>
        window.onload = function(){
            var today = new Date();
            var year = today.getFullYear();
            var month = today.getMonth();
            var date = today.getDate();
            var hour = today.getHours();
            var min = today.getMinutes();
            var ampm = '';
            if(hour < 12) {
                ampm = ' 오전';
            } else {
                ampm = ' 오후';
            }
            var last = year + '.' + (month + 1) + '.' + date + ' ' + (hour % 12) + ':' + min + ampm;
            
            document.getElementById('last').innerHTML = last;
        };
    </script>
</body>
</html>

참고(Reference)

  • MDN JavaScript

공유하기(Share) 더보기

  • 네이버 블러그 공유하기
  • 페이스북 공유하기
  • 트위터 공유하기
  • 트위터 공유하기
  • 트위터 공유하기

공감하기(Like) 더보기

UP NEXT : Ads by Google

질문하기(Questions)
댓글쓰기 폼
1 ··· 569 570 571 572 573 574 575 576 577 ··· 649