웹 브라우저에 시, 분, 초가 돌아가는 시계 만들기
- 웹 언어 배우기/JavaScript
- 2019. 4. 14. 17:03
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>clock</title>
</head>
<body>
<div class="js-clock">
<h1>00:00:00</h1>
</div>
<script src="clock.js"></script>
</body>
</html>디자인을 제외한다. 실질적으로 h1 안에 있는 것을 바꾸려고 한다.
const jsClock = document.querySelector('.js-clock');
const clock = jsClock.querySelector('h1');
function clock(){
const date = new Date();
const hour = date.getHours(), minute = date.getMinutes(), second = date.getSeconds();
// clock.innerHTML = `${hour} : ${minute} : ${second}`;
clock.innerHTML = `${hour < 10 ? `0${hour}` : hour} : ${minute < 10 ? `0${minute}` :minute} : ${second < 10 ? 0${second} : second}`;
}
function init(){
clock();
setInterval(clock,1000);
}
init();위 코드가 바로 자바스크립트로 시계를 구현한 것이다. 먼저 div안에 있는 h1 태그를 clock 변수 안에 대입했다. 그리고 clock 함수안에 실질적으로 시계를 구현했다. 현재 시간을 불러오기 위해 Date 객체를 생성했다. Date 객체는 시, 분, 초 등 다양한 값들을 가지고 있다. 그 중 시를 나타내는 getHours(), 분을 나타내는 getMinutes(), 그리고 초를 나타내는 getSeconds()의 값을 가지고 왔다.
주석처리된 clock.innerHTML = `${hour} : ${minute} : ${second}`; 의 문제점이 있어 주석 아래의 코드로 변경했다. 바로 10미만의 즉, 0부터 9까지의 숫자는 00, 01이 아닌 0, 1이런식으로 시간이 가는것을 알 수 있었다. 그래서 삼항 연산자를 사용해서 0을 붙여주기로 했다.
또 한가지 구현하고 싶은 것은 새로고침으로 시간이 가는 것이 아니라 자동으로 1초마다 바뀌는 것으로 구현하고 싶었다. 그래서 setInterval 함수를 사용해서 clock 함수의 내용을 1초마다 자동으로 바꾸기로 했다.
-끝-
