INIDOG
javascript-get-date-and-time-bg

자바스크립트 현재 날짜 및 시간 구하기 (Date 객체)

javascript-get-date-and-time-card

자바스크립트 현재 날짜 및 시간 구하기


자바스크립트를 사용하여 시스템 날짜를 출력할 수 있습니다.

자바스크립트에서 현재 날짜를 출력하려면 아래와 같이 Date 객체를 사용합니다.

var d = new Date();

 

d 변수의 값은 메소드 없는 Date 객체에서 다음과 같은 형식으로 나타날 것입니다.

Sat Nov 24 2018 21:10:59 GMT+0900 (한국 표준시)

 

물론 특정한 날짜나 시간을 원하는 형식대로 나타나게 할 수 있습니다. 일반적인 메소드는 다음과 같습니다.

메소드설명결과 (2018.11.24 토요일 기준)
getFullYear()로컬 시간의 연도를 반환2018
getYear()로컬 시간의 연도를 반환
* (실제 연도 - 1900) 의 결과 반환
118
getMonth()로컬 시간의 월 값을 반환
* 1월은 0, 2월은 1으로 각각의 달에 -1이 되어있음
10
getDate()로컬 시간의 일 값을 반환24
getDay()로컬 시간의 주 기준 일 값을 반환
* 일요일은 0, 월요일은 1...
6
getTime()로컬 시간의 전체 시간값을 밀리초 값으로 나타내어 반환
* 기준은 1970년 1월 1일 0시 0분
1543062625477
getHours()로컬 시간의 시간 값을 반환
* 24시간제로 표시
21
getMinutes()로컬 시간의 분 값을 반환30
getSeconds()로컬 시간의 초 값을 반환25
getMilliseconds()로컬 시간의 밀리초 값을 반환433

javascript-date-object-example-1

 

여기서 일부 메소드는 일반적으로 표시되는 날짜와 다르게 보일 수 있습니다. 다음을 주의해주세요.

  1. getYear()는 실제 연도에 1900을 뺀 값을 출력합니다. 가능하면 getFullYear() 메소드를 사용하는 것이 좋습니다.
  2. getTime()1970년 1월 1일 자정을 기준으로한 밀리초 값을 보여줍니다.
  3. getDay()요일 데이터를 기준으로 숫자가 출력됩니다. 0은 일요일입니다.
  4. getMonth()는 실제 월 값보다 1이 작습니다. 예를 들어 1월은 0이, 5월은 4가 출력됩니다. 따라서 사용 시에는 1을 더해주어야 합니다.

getMonth()를 사용하여 1을 더해 실제 월 데이터로 바꾸려 할 때에도 주의할 점이 있습니다. 단순히 1을 더하지 않고, 다음과 같이 괄호를 묶어주어야 합니다. 일부 상황에 따라 문자열로 취급되어 붙여질 수 있기 때문입니다.

var month = ( getMonth() + 1 );

 

이제 이를 활용하여 간단한 날짜와 시간을 표시해보도록 하겠습니다. 예제 코드는 다음과 같습니다.

<!DOCTYPE HTML>
<html lang="ko">
    <head>
        <title>Javascript date example</title>
        <meta charset="utf-8">
    </head>
    <body>
        <h1>Javascript Date Example</h1><hr/>
        <p id="time-result"></p>
    </body>
    <script type="text/javascript">
        var d = new Date();
        var currentDate = d.getFullYear() + "년 " + ( d.getMonth() + 1 ) + "월 " + d.getDate() + "일";
        var currentTime = d.getHours() + "시 " + d.getMinutes() + "분 " + d.getSeconds() + "초";
        var result = document.getElementById("time-result");
        result.innerHTML = "오늘 날짜는 " + currentDate + ", 시간은 " + currentTime + " 입니다.";
    </script>
</html>

 

결과를 확인해보겠습니다. 오늘 날짜와 현재 시각으로 나타나고 있음을 확인할 수 있습니다.

javascript-date-object-example-2

 

 

참고자료


이 글에 대해 어떻게 생각하시나요?
유용한 포스트였나요? 여러분의 의견을 하단의 Vote와 댓글로 남겨주세요 🙂
유용합니다!
아쉽습니다.

여러분의 의견을 댓글로 남겨주세요.

avatar
error: