원하는 결과
1. HTML
- id값이 "clock"인 h1태그를 body안에 넣어준다.
<h1 id="clock">00:00:00</h1>
2. Javascript
const clock = document.querySelector("#clock");
const date = new Date();
// 시계함수(getClock) 만들기
function getClock(){
// 시, 분, 초 변수 만들기
const hours = date.getHours();
const minutes = date.getMinutes();
const seconds = date.getSeconds();
// clock html element에 변수로 치환하기
clock.innerText = `${hours}:${minutes}:${seconds}`;
}
// 함수 호출하기
getClock();
setInterval(getClock, 1000)
위의 출력 값은 두자리 인 경우 12:13:31 출력이 되지만, 한자리인 숫자는 13:1:1 로 출력됨으로 두자리로 출력하기 위해서는,
// 시, 분, 초 변수 만들기
const hours = String(date.getHours()).padStart(2, "0");
const minutes = String(date.getMinutes()).padStart(2, "0");
const seconds = String(date.getSeconds()).padStart(2, "0");
변수 부분을 String 문자열로 바꿔준뒤, padStart 함수를 써준다.
padStart는 문자열일때만 사용 가능하므로 String으로 바꿔주는 것.
padStart(문자자리수, 채워넣을 값) 으로 설정해준다.
padStart(2, "0") 의 의미는 즉 두자리 여야하고, 한자리는 0으로 넣어준다는 말이다.
매초마다 setInterval 함수를 활용해 함수를 실행해주어 시계처럼 활용한다.