반응형
개발환경 : 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>
반응형
'🌐WEB' 카테고리의 다른 글
| [WEB] PC에서 실행중인 localhost 페이지를 모바일에서 확인하는 방법 (3) | 2021.06.01 |
|---|---|
| [WEB] jQuery Autocomplete 검색어 자동완성 예제 (0) | 2021.05.03 |
| [JavaScript] 자바스크립트 다크모드, 화이트모드 토글 버튼 만들기 (0) | 2021.04.13 |
| [JavaScript] 자바스크립트 배열 선언 & 유용한 메서드 예제 (0) | 2021.04.03 |
| [HTML5] table 태그 사용법 (0) | 2020.12.14 |