JS clock 만들기

 

파일을 이렇게 나누어 주었다.

파일의 경로가 바뀐 만큼 HTML에서 경로를 다시 설정해줘야 했는데 설정을 하지 않아 처음에 오류가 났었다.

 

 

 

        <script src="./JS/clock.js"></script>
        <script src="./JS/greeting.js"></script>

 

이렇게./를 눌러 파일의 경로를 찾아보고 직접 눌러주면 파일 경로 설정이 완료된다.

 

 

 

 

const clock = document.querySelector("h2#clock");
// const clock = document.getElementById("clock"); 과 같은 표현

function sayHello() {
    console.log("hello");
}

setInterval(sayHello, 5000);

setInterval(함수명, 몇 초 주기로 반복)

5000ms==5초 주기

 

---

setInterval(getClock, 1000);

1초 주기로 getClock 함수 반복

setTimeout(getClock, 1000);
1초 기다렸다가 한 번만 실행

 

const clock = document.querySelector("h2#clock");
// const clock = document.getElementById("clock"); 과 같은 표현

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

getClock();
setInterval(getClock, 1000);

getClock()을 추가 해준 이유는 처음에 0초에서 1초 사이는 시간이 출력이 되지 않아

바로 getClock()을 통해 웹사이트에 들어가는 순간 시계가 작동하라고 코드를 추가한 것이다.

 

---

 

const clock = document.querySelector("h2#clock");
// const clock = document.getElementById("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();
setInterval(getClock, 1000);

 

위에 사진처럼 시각이 한 자릿수 일 때 01, 02, 03으로 안 나오고 1, 2 ,3으로 나온다.

이번에는 이것을 해결해보도록 하겠다!

 

문자열.padStart(원하는 자리까지, "넣고 싶은 것");

이렇게 작성을 하면 된다.

만약 String(22).padStart(10, "3");

이렇게 작성을 하면 3333333322 이렇게 출력 값이 나온다.

padEnd도 있다. 이건 뒤로 값을 넣어준다.

 

 

모든 수정을 마치면

이렇게 결과값이 잘 나온다!