🌐WEB
[WEB] JavaScript로 HTML 문서에 실시간 시간 표시하기
Cocoon_
2021. 4. 15. 13:48
반응형
개발환경 : Windows10, VScode
안녕하세요 이번 시간에는 자바스크립트로 html문서에 실시간으로 시간을 표시하는 방법에 대해 알려드리도록 하겠습니다. 화면에는 월, 일, 요일을 표시하고 시, 분, 초에서 수가 한자리 수면 0을 채워줘서 두 자릿수로 표현하도록 하였습니다.
<clock1.html>
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>clock1</title>
</head>
<body>
<h1 id="clock" style="color:black;">clock</h1>
<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>
반응형