제목 그대로 시간의 변화를 실시간으로 화면에 나타내는 것을 다뤄 보겠다.
아날로그는 아니고 숫자만 변하는 단순 디지털 시계를 만들어 보겠다.
준비할 건 html, 자바스크립트 파일이고 사용할 js 함수는 new Date, padStart, setInterval이다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>home</title>
</head>
<body>
<h1 id="clock">00:00</h2>
<script src="js/clock.js"></script>
</body>
</html>우선 간단히 html 을 구성했다.
clock.js 파일을 만들어 h1 태그 내부에 시간을 출력할 것이다.
const clock = document.querySelector("h1#clock");
function showTime() {
const date = new Date()
const hour = String(date.getHours()).padStart(2, "0");
const minutes = String(date.getMinutes()).padStart(2, "0");
const second = String(date.getSeconds()).padStart(2, "0");
clock.innerText = `${hour} : ${minutes} : ${second}`
}
setInterval(showTime, 1000);구현 코드는 이게 전부이다.
querySelector를 이용해 element를 가져오는 부분의 설명은 생략하겠다.
사실, 나머지도 코드가 단순해 아래에서 함수 하나씩 간단히 설명하겠다.
Date
Date 함수를 사용해 시간, 분, 초를 각각 변수로 뽑았다.
padStart
padStart 함수는 argument로 maxLength, fillString을 받는데, 해당 변수 값의 길이가 maxLength를 만족시키지 못하면 비워지는 문자열 만큼 fillString으로 채워준다.
시, 분, 초가 한자리 수일 경우 앞에 "0"을 붙여주기 위해 각각 String 형태로 변환한 뒤 padStart 함수를 사용했다.
innerText
그리고 화면에 시간을 띄워주기 위해 innerText를 사용해 html의 원하는 태그 요소에 시간을 넣어주었다.
setInterval
마지막으로 핵심 함수가 되는 setInterval()이다.
특정한 시간 간격마다 내가 지정한 행동을 수행하는데,
첫 번째 argument로 원하는 행동을, 두 번째로 원하는 간격의 시간(ms)을 넣어주었다.
이제 1초마다 현재 시간의 시간, 분, 초를 구해 화면에 띄워줄 것이다.
'JavaScript' 카테고리의 다른 글
| [JavaScript] toggle 사용법 (0) | 2022.12.04 |
|---|---|
| [JavaScript] innerHTML vs innerText (0) | 2022.11.25 |