자바스크립트 시계 만들기(현재 시간 가져오기 getDate)

자바스크립트에서 현재 시간을 가져와서 매초마다 변경되는 

실시간 시계를 만들어 보겠습니다. 

아주 간단합니다 Date Object를 가져와서 시간 분 초를 뽑고 

값을 넣어주면 간단하게 완성입니다. 

일단 간단하게 크롬 개발자도구를 이용해서 보여드리겠습니다.  

var date = new Date();

데이트 객체를 받아와서 출력해보면 시간정보가 정확하게 나옵니다. 

date.getMonth();

현재 1월달입니다 getMonth()는 0~11월까지를 표시해줍니다. 

즉 +1을 해주면 현재 몇월인지 알수있습니다. 

date.getDate();

현재 24일로 getDate()는 현재 몇일인지 나옵니다.

Month는 0월부터 시작하는데 Date는 1일부터 시작하네요 

date.getDay();

현재 무슨요일인지를 출력해줍니다. 

4가 출력되고 오늘이 목요일인걸 봐선 

0은 일요일 6은 토요일 입니다. 

date.getHours();

getHours는 현재 시간을 보여줍니다.

14인걸로 봐서는 24시간제로 2시를 뜻합니다. 

date.getMinutes();

getMinutes는 현재 분을 보여줍니다. 

date.getSeconds();

 

getSeconds는 현재 초를 보여줍니다.

그럼 이것들을 종합해서 현재시간을 보여주는 시계를 만들어 보겠습니다.

00:00

<h1 id="clock" style="color:gray;">00:00</h1>

<script>

var clockTarget = document.getElementById("clock");

function clock() {
    var date = new Date();
    // date Object를 받아오고 
    var month = date.getMonth();
    // 달을 받아옵니다 
    var clockDate = date.getDate();
    // 몇일인지 받아옵니다 
    var day = date.getDay();
    // 요일을 받아옵니다. 
    var week = ['일', '월', '화', '수', '목', '금', '토'];
    // 요일은 숫자형태로 리턴되기때문에 미리 배열을 만듭니다. 
    var hours = date.getHours();
    // 시간을 받아오고 
    var minutes = date.getMinutes();
    // 분도 받아옵니다.
    var seconds = date.getSeconds();
    // 초까지 받아온후 
    clockTarget .innerText = `${month+1}월 ${clockDate}일 ${week[day]}요일` +
    `${hours < 10 ? `0${hours}` : hours}:${minutes < 10 ? `0${minutes }`  : minutes }:${seconds < 10 ? `0${seconds }`  : seconds }`;
    // 월은 0부터 1월이기때문에 +1일을 해주고 
    // 시간 분 초는 한자리수이면 시계가 어색해보일까봐 10보다 작으면 앞에0을 붙혀주는 작업을 3항연산으로 했습니다. 
}

function init() {
clock();
// 최초에 함수를 한번 실행시켜주고 
setInterval(clock, 1000);
// setInterval이라는 함수로 매초마다 실행을 해줍니다.
// setInterval은 첫번째 파라메터는 함수이고 두번째는 시간인데 밀리초단위로 받습니다. 1000 = 1초 
}

init();

</script>