오늘은 clock기능을 추가해보자.

📖Clock

-먼저 시작하기에 앞서 clock기능을 추가하기 위해 html에 h2태그 추가하고 id에 clock이라고 적어주자.
✍ example

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

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

• html의 h2 태그에서 default로 00:00:00 을 보이게 설정.
• html에서 clock을 Javascript로 가져옴
  
  

자 이제 clock을 만들어보자 !!

1. setInterval()

-interval은 매번 일어나야하는 무언가를 말한다. 예를 들어 매 2초마다 발생하게하고 싶은 것은 setInterval()을 사용하여 표현하면 된다.


✍ example

//javascript
function getClock(){
    const date=new Date();
    console.log(`${date.getHours()}:${date.getMinutes()}:${date.getSeconds()}`);

}
getClock();//시계를 즉시 실행. 
setInterval(getClock, 1000);

• setInterval()의 첫 번째 argument는 실행하고자 하는 함수이고 두 번째 argument는 호출되는 함수의 간격을 몇초(ms)로 할 것인지 설정.
• Date object는 오늘 날짜와 시간을 가져옴. Date의 함수를 이용하여 시간, 분, 초를 가져올 수 있음.
  
  

✔ 결과 확인

• 매 초마다 새로운 Date object를 만들고 있는 것을 확인 가능.

✍ example

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

}

• clock.innerText를 이용하여 불러온 시간, 분, 초 값을 h2태그에 넣어줌.
  
  

✔ 결과 확인

2. padStrat()

-시계를 1:1:1이 아닌 01:01:01로 표현하고 싶다면 string이 적어도 두자리를 가지게 만들어야 한다. 이는 padStrat()함수를 사용하면 표현이 가능하다.
✍ example

//javascript

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

• padStrat()는 string에 사용할 수 있는 function. 따라서 숫자에 사용하기 위해서는 숫자를 string으로 바꿔줘야함.
• .padStart(2, "0");는 앞의 string의 길이를 2로 만드는데 만약 string의 길이가 2가 아니라면 앞에 0을 추가해줘 라는 뜻.

👉만약 뒤에 무언가를 추가하고 싶다면 .padStart()대신.padEnd()를 사용하면 된다 !!!


✔ 결과 확인

• 시계가 18:55:0 이 아닌 18:55:00으로 표현된 것 확인 가능.

✔ 마치며

다음 포스팅에서는 background 설정에 대해 공부해보겠습니다. 😊