interval, timeout, Date, padStart
function sayHello() {
console.log("hello");
}
// interval : 매번 일어나야 하는 어떤 것
setInterval(sayHello, 5000);
// (function, ms) -> 5초마다 sayHello()를 호출함
// timeout : 특정 시간이 지난 후 한 번 실행함
setTimeout(sayHello, 5000);
// (function, ms) -> 5초후에 sayHello()를 한 번 호출함
// 시간 가져오기
new Date().getHours()
new Date().getMinutes()
new Date().getSeconds()
// 문자열 타입에 사용할 수 있음 ex) "1".padStart(2, "0");
string.padStart(2, "0"); // -> padStart()를 써서 padding을 추가해달라
// 문자열의 길이는 2이고, 길이가 2가 아니라면 앞쪽에 0을 추가해달라
string.padEnd(2, "0");
// 문자열의 길이는 2이고, 길이가 2가 아니라면 뒤쪽에 0을 추가해달라CLOCK
index.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</title>
</head>
<body>
<h2 id="clock">00:00:00</h2>
<script src="js/clock.js"></script>
</body>
</html>clock.js
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
// = `${date.getHours()}:${date.getMinutes()}:${date.getSeconds()}`;
clock.innerText = `${hours}:${minutes}:${seconds}`;
}
getClock(); // 웹사이트를 켰을때 1초를 기다리지 않고 바로 실행하도록 추가해줌
setInterval(getClock, 1000);<1초 단위 시계>
=> 00:00:00 이런 형태로 출력하기 위해 padStart() 사용
