지난 시간에 JS로 시계를 구현했는데 표시되는 시간이 19:23:9 이런식으로 두자리 숫자가 아닐때에는 그대로 한자리만 출력하게 했다. 한자리 숫자를 표시할때는 앞에 0을 붙이고 싶다
보통 padStart() 함수는 가지고 있는 string을 보다 길게 만들고 싶을때 사용한다.
"1".padStart(2, "0")padStart라는 함수를 JS에서 제공하고 있다.
문자열 1에 padStart 함수의 인자로 (표시할 자리수, 표시할 내용)을 적어주면 된다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Momentum App</title>
<link rel="stylesheet" href="CSS/style.css">
</head>
<body>
<form id="login-form" class="hidden">
<input
required
maxlength="10"
type="text"
placeholder="What is your name?" />
<input type="submit" value="Log In" />
</form>
<h2 id="clock">00:00</h2>
<h1 id="greeting" class="hidden"></h1>
<script src="JS/greetings.js"></script>
<script src="JS/clock.js"></script>
</body>
</html>JS
const time = document.querySelector("h2#clock");
const getTime = () => {
const date = new Date();
const hours = String(date.getHours()).padStart("2",0);
const minutes = String(date.getMinutes()).padStart("2",0);
const seconds = String(date.getSeconds()).padStart("2",0);
time.innerText = `${hours}:${minutes}:${seconds}`
}
getTime();
setInterval(getTime, 1000);- time 변수에 querySelector를 이용해서 h2의 id에 clock을 가진 요소를 찾는다.
- getTime 함수에 console.log를 찍어본다
- setInterval(getTime, 1000)은 1초 (1000ms, 밀리세컨즈, 1/1000초) 마다 콘솔을 찍으면 정상 작동 하는것이다.
- 시간을 가져오는 로직을 작성한다.
- 함수 블록 내부에 date를 선언하고 new Date()를 할당한다.
- date의 메서드를 이용하여 시간(hour), 분(minute), 초(second) 정보를 가져온다. 이를 변수에 할당한다.
- padStart 함수를 이용해 반드시 두 자리수로 표시하고 한 자리수의 경우 앞에 0을 붙인다.
- padStart는 문자열에만 적용이 가능하기 때문에 시간을 가져오는 date의 메서드를 String()으로 감싼다.
- time의 innerText를 템플릿 리터럴을 이용하여 시간 정보를 담은 변수를 hour:minute:second 와 같이 작성한다.
결과:
프론트엔드 개발자 지망생