Clock만들기

기본 세팅

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

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

Intervals

interval : "매번" 일어나야 하는 무언가를 말한다.

setInterval(실행하고자 하는 function, 호출되는 function간격 {ms}) 

ex. setInterval(sayHello, 5000) - 매 5초마다 실행하는 것!

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

setInterval(sayHello, 5000);

 

Timeouts and Dates

• Timeout 도 마찬가지이다.

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

setTimeout(sayHello, 5000);

 

• Date 

매 초마다 getHours() / getMinutes() / getSeconds() 실시간 가져옴..

매 초마다 이 function들을 호출할 수 있다. 똑같은 function을 실행할 때마다 새로운 초를 가져오게 됨.

▶ 이러한 setTimeout()의 특징때문에 → 뭔가를 계속해서 다시 실행하고 싶을 땐, setInterval()를 사용하게 된다.

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

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

setInterval(getClock, 1000);

콘솔창으로 실행해보면, new Date object들이 새롭게 업데이트되는 걸 보게 될 것이다.

▶ 1초동안은 00:00:00 을 표시하고 그 뒤에 시간이 갱신되는 점

 

★ website가 load되자마자 getClock()을 실행하고 또 매초마다 다시 실행되도록 하고 싶을 때 ★

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

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

getClock();
setInterval(getClock, 1000);

▶ 00:00:00 없이 바로 시간을 볼 수 있다는 점

 

브라우저 창에 띄우고자 실행하려고 하면,

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

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

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

getClock();
setInterval(getClock, 1000);

 

 

PadStart

단, 초가 0,1,2,이 되는 문제점이 있다. 01.02,03...이렇게 하고 싶다........

위 문제점을 해결할 수 있는 건. padStart()이다. --- string에 쓸 수 있는 function ---

ex. "1".padStart(2,"0") > "01" 의 결과가 나온다.

길이가 1인 string. padding을 써서 string의 시작부분을 늘려야 한다 ( 늘려야 한다는 문자열 길이 , 길이가 2가 되지 않는 다면 앞쪽에 "0"을 추가한다 ) 

ex. "hello". padStart(10, x) > xxxxxxxxxxhello 의 결과가 나온다.

cf. padEnd()는 뒤쪽에 추가한다는 것도 있다.

그럼 다시 코드에 적용하면

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);

 

★ number -> string으로 바꿀 수 있는 방법 ★

new Date().getHours() > 16

String(new Date().getHours()) > "16"  즉. String() 괄호안에 string으로 바꾸고 싶은 number을 입력한다.

 

D-day 계산 방법 참고자료 https://velog.io/@dev-hannahk/js-d-day

[JavaScript] D-day 계산

과제 중 나머지 값 연산자 :  % 이용하기