오늘은 간단하게 JavaScript로 시계를 만들어본다.
먼저 HTML문서에 div로 클래스명이 js-clock인 요소를 만들고 그 안에 h1 요소를 생성한다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Momentum</title>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<div class="js-clock">
<h1>00:00</h1>
</div>
<script src="clock.js"></script>
</body>
</html>그 후, clock.js로 넘어와서 다음과 같이 작성한다.
const clockContainer = document.querySelector('.js-clock'),
clockTitle = clockContainer.querySelector('h1');
function getTime() {
const date = new Date();
const seconds = date.getSeconds();
const minutes = date.getMinutes();
const hours = date.getHours();
clockTitle.innerText = `${hours:minutes:seconds}`;
}
setInterval(getTime, 1000);
function init() {
getTime();
}
init();new Date()로 시간을 생성하고 각각의 seconds, minutes, hours에 getSeconds(), getMinutes(), getHours()를 이용하여 선언해주고 실행하면 된다.
여기에 setInterval() 함수로 1,000 밀리세컨드 마다 함수가 실행되도록하면 시계가 완성이 된다.
다만 이렇게 끝나면 문제점은 오전 1시 1분 1초일 때, 1:1:1이라고 표현될 것이다.
해결하기 위해 mini if문을 넣어준다.
clockTitle.innerText = `${hours < 10 ? `0${hours}` : hours}:${
minutes < 10 ? `0${minutes}` : minutes
}:${seconds < 10 ? `0${seconds}` : seconds}`;각각의 요소가 10보다 작을 때는 01:01:01로 표기되도록 수정했다.
내 이름 고은정, 은을 180deg 돌려 고긍정 🤭