nomard crome app 4

clock

HTML

<h2 id="clock">00:00</h2>

HTML에 id=”clock”과 기본 시간 작성

JS

const clock = document.querySelector("h2#clock");

JS에서 clock 정의

---

setTimeout, setInterval

function sayHello() {
    console.log("hello");
}
setTimeout(sayHello, 5000); // 5초 후에
setInterval(sayHello, 5000); // 5초 마다

---

new Date

console.log(new Date);

Sat Oct 01 2022 21:28:32 GMT+0900 (한국 표준시)

const date = new Date();
date.getDate() // 1
date.getDay() // 6 토요일
date.getFullYear() // 2022
date.getHours() // 21
date.getMunites() // 31
date.getSeconds() // 33

---

const clock = document.querySelector("h2#clock");

function getClock() {
    const date = new Date();
    const newHours = date.getHours();
    const newMinutes = date.getMinutes();
    const newSecond = date.getSeconds();
    clock.innerText = `${newHours}:${newMinutes}:${newSecond}`
}

getClock(); // 1초 후 부터 시간을 표시하기 때문에 미리 한번 호출을 시킨다.
setInterval(getClock, 1000);

시계 만드는 코드

---

padStart()

하지만 여전히 초가 1, 2, 3 으로 표시되기 때문에 01, 02, 03 으로 만들어야 한다.

padStart()는 sting에 쓸 수 있는 function이다.

"1".pardStart(2, "0") // "01"
"1".pardEnd(2, "0") // "10"

따라서 string으로 바꾼다음에 padStart를 사용

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}`;
}