개발환경 : Windows10, VScode
안녕하세요 이번 시간에는 자바스크립트로 html문서에 실시간으로 시간을 표시하는 방법에 대해 알려드리도록 하겠습니다. 화면에는 월, 일, 요일을 표시하고 시, 분, 초에서 수가 한자리 수면 0을 채워줘서 두 자릿수로 표현하도록 하였습니다.
<clock1.html>
<!DOCTYPE html> <html lang="ko"> <head> <meta charset="UTF-8"> <title>clock1</title> </head> <body> <h2 id="clock" style="color:black;">clock</h2> <script> var Target = document.getElementById("clock"); function clock() { var time = new Date(); var month = time.getMonth(); var date = time.getDate(); var day = time.getDay(); var week = ['일', '월', '화', '수', '목', '금', '토']; var hours = time.getHours(); var minutes = time.getMinutes(); var seconds = time.getSeconds(); Target.innerText = `${month + 1}월 ${date}일 ${week[day]}요일 ` + `${hours < 10 ? `0${hours}` : hours}:${minutes < 10 ? `0${minutes}` : minutes}:${seconds < 10 ? `0${seconds}` : seconds}`; } clock(); setInterval(clock, 1000); // 1초마다 실행 </script> </body> </html>new Date() 를 통해 현재 날짜와 시간이 저장된 Date 객체를 생성하고
월, 일, 요일, 시,분,초 데이터들을 변수로 저장합니다.
Document.getElementById("clock")를 통해 문서 내 "clock" id 속성을 가진 요소를 Target으로 저장하고
innerText를 통해 Target의 text값 부분에 표현하고자 하는 값을 출력합니다.
그리고 setInterval(clock,1000) 을 통해 1초 간격으로 함수를 실행합니다.
다른 방식으로도 디자인해서 한번 출력해봤습니다.
<clock2.html>
<!DOCTYPE html> <html lang="ko"> <head> <meta charset="UTF-8"> <title>clock2</title> </head> <body> <div style="text-align: center;"> <span id="clock" style="color:gray; font-size: 100px;">clock</span> <span id="apm" style="color:gray; font-size: 50px;" >ampm</span> </div> <script> var Target = document.getElementById("clock"); var Target_apm = document.getElementById("apm"); function clock() { var time = new Date(); var hours = time.getHours(); var minutes = time.getMinutes(); var seconds = time.getSeconds(); var AmPm ="AM"; if(hours > 12){ var AmPm ="PM"; hours %= 12; } Target.innerText = `${hours < 10 ? `0${hours}` : hours}:${minutes < 10 ? `0${minutes}` : minutes}:${seconds < 10 ? `0${seconds}` : seconds}`; Target_apm.innerText = `${AmPm}`; } clock(); setInterval(clock, 1000); // 1초마다 실행 </script> </body> </html>date, Date Object, getdate, GetDay, getHours, getMinutes, GetMonth, getSeconds, new Date, vanillaJS, 바닐라스크립트, 시간받아오기, 시계만들기, 자바스크립트
자바스크립트에서 현재 시간을 가져와서 매초마다 변경되는
실시간 시계를 만들어 보겠습니다.
아주 간단합니다 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
<h2 id="clock" style="color:gray;">00:00</h2>
<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>