Javascript - Date 시계 만들기
- 프로그래밍/자바스크립트
- 2021. 4. 21.
이번 글에서는 이전에 학습한 Javascript의 Date() 객체를 활용해서 문자 시계(Text Clock)를 만들어 보겠습니다. 자바스크립트의 내장 객체인 Date와 타이머 함수인 setInterval()을 사용하면 년, 월, 일, 시간을 보여주는 시계를 만들 수 있습니다.
문자 시계(Text Clock) 만들기
화면에 날짜와 시간을 표시하기 위해서는 Date객체의 날짜 및 시간 데이터 값을 가져오는 함수가 필요하고 일정 시간을 주기로 화면에 보이는 값을 갱신하기 위해서는 setInterval() 함수를 사용합니다. 이렇게 Date 객체의 날짜 및 시간 제공 함수와 특정 주기 반복 실행 함수를 가지고 쉽게 문자 시계(Text Clock)를 만들 수 있습니다.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>문자 시계(Text Clock)</title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="">
<style>
.frame {
display: inline-block;
padding: 8px;
border-radius: 8px;
background-color: #000000;
}
.clock {
color: #ffffff;
font-family: 'Roboto', sans-serif;
text-align: center;
box-sizing: border-box;
}
.large_text {
font-size: 75px;
}
.small_text {
font-size: 20px;
}
.date_box {
font-size: 15px;
}
@keyframes blink {
50% {
opacity: 0.0;
}
}
.colon {
font-size: 55px;
vertical-align: text-bottom;
animation: blink 1s step-start 0s infinite;
}
</style>
</head>
<body>
<div class="frame">
<div class="clock">
<div class="time_box">
<span id="hours" class="large_text"></span>
<span class="colon">:</span>
<span id="minute" class="large_text"></span>
<span id="seconds" class="small_text"></span>
</div>
<div class="date_box">
<span id="year"></span>
<span>.</span>
<span id="month"></span>
<span>.</span>
<span id="date"></span>
<span id="day"></span>
</div>
</div>
</div>
<script>
const watchClock = () => {
function leftPad(number) {
if (number < 10) {
return `0${number}`;
}
return `${number}`;
};
function setText(selector, text) {
const targetElement = document.querySelector(selector);
if (!targetElement) {
return;
}
targetElement.innerText = text;
};
function getDayText(index) {
const days = ['일요일', '월요일', '화요일', '수요일', '목요일', '금요일', '토요일'];
return days[index];
};
const present = new Date();
const hour = leftPad(present.getHours());
const minute = leftPad(present.getMinutes());
const seconds = leftPad(present.getSeconds());
setText('#hours', hour);
setText('#minute', minute);
setText('#seconds', seconds);
const year = present.getFullYear();
const month = leftPad(present.getMonth() + 1);
const date = leftPad(present.getDate());
const day = getDayText(present.getDay());
setText('#year', year);
setText('#month', month);
setText('#date', date);
setText('#day', day);
};
watchClock();
const clockInterval = setInterval(watchClock, 1000);
</script>
</body>
</html>
예제로 작성한 코드는 첨부파일로도 제공하고 있습니다. 위의 코드를 가져다가 사용하시는게 불편하시다면 첨부파일을 다운로드해서 사용하시면 됩니다.
예제 코드 내용 중 자바스크립트와 관련 된 내용을 설명하면 아래와 같습니다.
- watchClock(): Date 객체를 만들어서 날짜 및 시간 데이터를 가져와 화면에 그립니다.
- leftPad(): 문자 형식을 맞추기위해 1자리 수의 값을 입력받으면 왼쪽에 '0' 문자를 채워 반환합니다.
- setText(): DOM Selector를 사용해 텍스트를 갱신합니다.
- getDayText(): index를 기준으로 요일 이름을 반환합니다.
- setInterval(): 인자로 전달 받은 함수(식)를 일정 주기로 실행시킵니다.
일상에서 사용하는 실제 시계처럼 보이기 위해 CSS를 사용해 Blink 애니메이션 효과도 추가하였습니다.
See the Pen Clock by yongdae (@yongdae) on CodePen.
Codepen을 사용해 예제 코드를 테스트 할 수 있도록 하였습니다.
참고하면 좋은 글
2021.04.17 - [프로그래밍/Javascript] - Javascript - Date 사용법 알아보기
2021.05.07 - [프로그래밍/HTML, CSS] - CSS - 깜빡이는 효과 [Blink Effect]
'프로그래밍 > 자바스크립트' 카테고리의 다른 글
| Javascript - replace, replaceAll [문자 치환하기] (19) | 2021.04.23 |
|---|---|
| Javascript - null과 undefined의 차이 그리고 확인 및 처리 (6) | 2021.04.22 |
| Javascript - Date 날짜 계산 [날짜 비교, 날짜 차이] (0) | 2021.04.21 |
| Javascript - Date 날짜 형식 [yyyy-MM-dd] (0) | 2021.04.20 |
| Javascript - Date 날짜 계산 [더하기, 빼기, 설정] (0) | 2021.04.19 |