🕒 현재 시간 표현하기
1. HTML
<!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">
<link rel="stylesheet" href="css/style.css">
<title>Momentum App</title>
</head>
<body>
<h2 id="clock">00:00</h2>
<script src="js/greetings.js"></script>
<script src="js/clock.js"></script>
</body>
</html>2. JavaScript
const clock = document.querySelector("#clock");
function getClock() {
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");
clock.innerText = `${hours}:${minutes}:${seconds}`;
}
getClock(); // 페이지가 reload 된 후에 바로 시간을 표현해주기 위함
setInterval(getClock, 1000);🕒 알게 된 것
-
setInterval 함수는 정해진 시간을 주기로 반복적으로 실행
setTimeout 함수는 정해진 시간 후에 한 번 실행 -
padStart 함수와 padEnd 함수는 가지고 있는 string의 길이보다 더 길게 만들때 사용. padStart 함수는 앞을 채워서 원하는 길이를 만들고, padEnd 함수는 뒤를 채워서 원하는 길이를 만듦.
-
padStart 함수와 padEnd 함수는 문자열에만 적용할 수 있음.
🎁 참조 및 출처
무엇이든 할 수 있고, 무엇이든 될 수 있는