19 Interval & Timeout 시간 만들기

 

시간 표시하기

 

 

setInterval(a,00)  : a함수를 00초마다 실행하라! (alarm개념)

setTimeout(a,00) : a함수를 00초 후에 실행하라! (delay개념)

 

 

 

 

 

1. Date 현재 시간을 표시

 

 

new Date() : 오늘 날짜

 

new Date().getHours 라고 콘솔에 적어보면 시간을 불러온다.

getMinutes는 분, getSeconds는 초.

 

 

const date = new Date();

console.log(date.getHours(),date.getMinutes(),date.getSeconds());

 

 

 

 

 

 

2. Interval의 적용

 

 

 

const date = new Date();

function getClock(){

console.log(date.getHours(),date.getMinutes(),date.getSeconds());

}

setInterval(getClock, 1000);

근데, 이렇게 해두었더니 매초 실행하기는 하지만 reflesh가 되지 않고 있다.

 

해서, 함수내부에 변수를 포함시켜서 매번 재 할당되도록 해줘야겠다.

 

 

function getClock(){

    const date = new Date();

    console.log(date.getHours(),date.getMinutes(),date.getSeconds());

}

setInterval(getClock, 1000);

 

 

자, 이제 아래처럼 시간이 재생되며 표시되고 있다

 

 

 

 

3. .html 작성하기

 

 

 

폴더를 만들어 js폴더 안에 이전에 만든 app.js파일을 > greeting.js라고 이름을 바꿔주고,

clock.js파일도 해당 폴더에 하나 만들어서 연결해 두었다.

 

현재 시계 관련 코드를 clock.js에 작성하고 있다.

그리고, <h2> 태그에 id를 설정하고, js에서 불러올 것이다. 그 text는 시간표시되도록 양식을 작성했다.

이 역시 js에서 바꿀 것이다.

 

 

 

 

 

4. js 작성하기

 

처음 실행되는 순간에 1초 딜레이가 생기는 것을 볼 수 있다.

해서 앞서서 함수를 우선 한 번 실행시키도록 해준다.

그리고 시간을 문자열로 바꿔주고 콜론도 넣어준다.

이를 clock에 할당한 h2문자열에 innerText로 변경하도록 해준다.

 

 

 

 

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

function getClock(){

    const date = new Date();

    clock.innerText = `${date.getHours()}:${date.getMinutes()}:${date.getSeconds()}`;

}

getClock();

setInterval(getClock, 1000);

 

 

 

 

또, 여기서 보면 초를 나타내는 문자열이 한 자리일 때 앞에 0이 붙지 않는 것이다.

해서 padStart라는 메서드를 넣어준다. 문자열의 자릿수를 늘려주면서 앞에 0을 붙여준다.

 

string.padStart(a, b) : 문자열 string을 최대 a자릿수 문자열로 padding을 만든다는 뜻이며, 해당 문자열이 a자릿수가 아닐 경우 그 앞자리에 b를 넣어준다.

 

"1". padStart(2, "0")를 명령하면

다음과 같이 출력해 준다.

"01"

 

예시로 보면, 코드를 생성하는 데 앞자리가 비어있을 경우 xxxx와 같은 문자열로 대치하여 뽑을 수도 있겠다.

 

"hello". padStart(10, "x")

>>>

"xxxxxhello"

 

이렇게 표시해 주는 것이다.

 

 

 

해서, 각 시간, 분, 초를 각각 변수에 할당하고, String으로 감싸줘서 문자열로 먼저 변환해 주었다

그리고 그 문자열을 padStart를 통해 2 자릿수, 그리고 앞에 0을 붙이도록 해주었다.

innerText에는 바뀐 각각 변수를 수정해 주었다.

 

const clock = document.querySelector("h2#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);

 

 

 

 

BR.h