[노마드코더 바닐라JS로 크롬 앱 만들기] #5.0 ~ #5.3

📌 실시간 시계 만들기

HTML

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

JS

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

위와 같이 clock을 추가해준다. 그럼 페이지에는 00:00만 보일 것이다.

 

이번에는 setInterval과 시간 관련 명령어를 사용한다.

먼저 setInterval은 특정 시간마다 무슨 일이 일어나게 하고 싶을 때 사용한다. (호출할 함수 이름, 초(ms))

비슷하게 setTimeout도 있는데 얘는 특정 시간 '후'에 무슨 일이 일어나게 한다. 사용 방법은 동일하다.

 

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

setInterval(sayHello, 5000)

sayHello 함수를 5초마다 작동시키겠다는 뜻이다.

 

 

시간에 대한 명령어를 배워본다.

 

• Date() : 날짜+시간 전체
• const date = new Date();
• date.getDate() : 일
• date.getDay(): 요일 (일요일 0부터 시작)
• date.getFullYear(): 년도
• date.getMonth(): 월 (1월 0부터 시작)
• date.getHours(): 시
• date.getMinutes(): 분
• date.getSeconds(): 초

참고: 새로운 Date 객체를 생성하는 방법은 new 연산자를 사용하는 것이 유일합니다.
now = Date()처럼 Date를 직접 호출하면 새로운 Date 객체가 아니라 문자열을 반환합니다.

출처는 공식문서

 

Date는 선언할 때 new를 꼭 붙여주자.

 

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

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

getClock()
setInterval(getClock, 1000);

 

clock을 찾고, getClock이라는 함수를 만들었다.

이 함수는 date라는 상수를 선언했으며 오늘의 날짜와 시간을 갖고 있다.

우리는 시계를 만들거라서 clock의 innerText에는 시:분:초 만 보여지게 하고 싶다.

getHours... 등등 시, 분, 초를 가져와 백틱과 ${}으로 묶어주면 된다. 

 

근데 setInterval을 써주지 않으면 시계가 0:0:0으로 있다가 1초 후에 움직이기 때문에 이걸 써줘서 바로 보이게 한다.

 

지금 거슬리는 부분이 있을 텐데 바로 시:분:초가 한 자리로 나온다는 거다.

00초로 맞추려면 어떻게 해야 할까?

 

 

pad를 사용한다.

• padStart
  • string의 길이를 만들어주는 함수
    • “1”.padStart(2, “0”)
    • “” 안 string의 길이가 첫번째 인수가 아니라면 0이 추가됨
• padEnd
  • END에 추가해주는 함수

padStart를 쓸건데 이걸 쓰려면 string이어야 한다. (당연함. string의 길이를 만들어주는 함수임)

근데 우리가 받는 date 아이들은 모두 num이기 때문에 얘네 모두를 String으로 감싸 바꿔준다.

이후 다시 표현해주면 된다.

 

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

 

 

📌 8일차 과제 - 크리스마스 d-day

 

CSS로 색깔만 입혀봤다.

크리스마스 날짜와 현재 날짜를 선언하고 크리스마스에서 현재 날짜를 빼면 얼마 남았는지 알 수 있다.

이렇게 뺴고 나면 엄청 큰 범위의 숫자가 나오는데 이게 ms단위여서 그렇다.

그래서 먼저 초 단위(60초) > 분 단위(60분) > 시 단위(24시) > 일 단위로 변환을 시켜줘야 한다.

그렇게 변환 시켜준 시간으로 `` ${} 활용해서 엮어주면 된다.

 

---

 

 

바닐라 JS로 크롬 앱 만들기 – 노마드 코더 Nomad Coders