[JavaScript 간단한 날씨 웹 만들기] 시계 구현하기

본격적으로 자바스크립트로 작업을 시작했습니다.😁

 

디자인 작업에서 줄 친 부분을 보시면

날씨 웹이기도 하지만, 시간도 표시해줍니다.

 

날씨 API 끌어다가 넣는것보다

시계를 만드는게 빠르겠다고 생각이 들어

시계부터 만들어주었습니다.

 

---

구현해야 할 기능

(예시 : 오후 01 : 03)

1. 무슨 요일인지 구현
2. 시, 분 구현
3. "시"일 경우 오전, 오후 구분하기
4. 시, 분이 10보다 작을 경우 0 붙이기

 

 

시계 기능은 아래 블로그를 참고해서 만들었습니다.

https://mengkkoit.tistory.com/6

자바스크립트 시계 만들기(현재 시간 가져오기 getDate)

 

엘리스 AI 트랙에서 현재 시간을 구하는 건 만들어 봤지만,

시계가 계속 진행되게는 만들어본 적이 없어서어떻게 하지 생각하다가 검색을 해봤더니

setInterval() 함수를 사용해서 1초마다 계속 진행되게 만들면 됩니다.

(보자마자 와....!! 했습니다.👏👏)

 

방법은 밑에서 차근차근 설명하겠습니다.

---

현재 시간 구현하기

const now = new Date();
console.log(now) //Tue Jul 19 2022 16:16:05 GMT+0900 (한국 표준시) -> object형태

• new Date()는 현재 시간을 알 수 있고, object 형태로 나옵니다.

 

요일 구현하기

const now = new Date();
  
const day = now.getDay(); // 현재 무슨요일인지 숫자로 출력
const week = ['일', '월', '화', '수', '목', '금', '토']; // 요일은 숫자형태로 리턴됨

console.log(week[day]); // 무슨요일인지 나옴

• getDay() : 요일을 숫자로 나타냅니다.
• 요일은 숫자로 출력됩니다.
• 숫자는 "0 ~ 6"으로 출력이 되고, "일~토"를 나타냅니다.
• 0 ~ 6 : 일~토

 

 

현재 시, 분 구현

예시 : 오후 01 : 03

const timeText = document.querySelector('#timeText');

const now = new Date();

let hours = now.getHours(); // 오후일 경우 -12를 해줘야 됨으로 let으로 씀
const minutes = now.getMinutes();

• getHours() : 현재 몇 시인지 나타냅니다.
  • let hours : hours를 let으로 쓴 이유는 오후일 경우 -12을 해줄 거라 즉 변경이 될 수 있어 let으로 썼습니다.
• getMinutes() : 현재 몇 분인지 나타냅니다.

 

 

오전, 오후 시간 구하기

let ampm =  '';
if(hours > 12){
  hours -= 12;
  ampm = '오후';
}else ampm = '오전';

• 현재 시간이 12보다 크면 오후임으로 현재시간 - 12를 해주고
  ampm에 '오후'를 담아주었습니다.
• 아닐 경우에는 ampm에 '오전'을 담아주었습니다.

 

 

시, 분이 10보다 작을 경우 앞에 0 붙이기

• 삼항 연산자를 사용해서 구현하였습니다.

timeText.innerText = `${ampm} ${hours < 10 ? `0${hours}` : hours}:${minutes < 10 ? `0${minutes}` : minutes}`

 

이렇게 작성을 했지만

이렇게 보면 불편하니까 "시"와 "분"을 따로 보자면

hours < 10 ? `0${hours}` : hours // 시가 10보다 작거나 클 경우
minutes < 10 ? `0${minutes}` : minutes //분이 10보다 작거나 클 경우

이렇게 구현하였습니다.

 

 

현재 시, 분 구현부터 ~ 시, 분이 10보다 작을 경우 앞에 0 붙이기 까지 합치면 아래와 같이 됩니다.

const timeText = document.querySelector('#timeText');

const now = new Date();

let hours = now.getHours(); // 오후일 경우 -12를 해줘야 됨으로 let으로 씀
const minutes = now.getMinutes();

// hours가 12이초과이면 -12를 해주어서 hours에 넣어주고 ampm에 오후로 넣어주기
let ampm =  '';
if(hours > 12){
  hours -= 12;
  ampm = '오후';
}else ampm = '오전';

// 오후 01:03
timeText.innerText = `${ampm} ${hours < 10 ? `0${hours}` : hours}:${minutes < 10 ? `0${minutes}` : minutes}`

 

 

현재 시간 최종 구현

// 시계 구현
const timeText = document.querySelector('#timeText');

function clock(){
  const now = new Date();
  
  const day = now.getDay();
  const week = ['일', '월', '화', '수', '목', '금', '토'];
  let hours = now.getHours();
  const minutes = now.getMinutes();

  let ampm =  '';
  if(hours > 12){
    hours -= 12;
    ampm = '오후';
  }else ampm = '오전';

  // 화, 오후 12:36
  timeText.innerText = `${week[day]}, ${ampm} ${hours < 10 ? `0${hours}` : hours}:${minutes < 10 ? `0${minutes}` : minutes}`
}

이렇게만 구현하면 새로고침을 해야 시간이 바뀝니다.

계속 진행되는 시계를 만들기 위해 setInterval() 함수를 사용해 주어야 합니다.

 

뒤에 계속 진행되는 시계를 만들기 위해

현재 시간 구현한 부분을 clock() 함수에 담아주었습니다.

 

---

계속 진행되는 시계 만들기

(() => {
  clock(); // 안쓰면 안보여요.
  setInterval(clock, 1000);
})();

• clock() 함수를 실행시킨 뒤 setInterval 함수로 시간을 업데이트해줍니다.
• setInterval 함수로 매 1초마다 clock함수를 실행을 해줍니다. (1초씩 = 1000)
• setInterval함수
  • 첫 번째 파라미터 : 함수 (clock)
  • 두 번째 파라미터 : 시간 (1000)
• 시간은 매 순간 지나감으로 arrow function으로 즉시 실행 함수를 만들어 주었습니다.

---

최종 구현

// 시계 구현
const timeText = document.querySelector('#timeText');

function clock(){
  const now = new Date();
  
  const day = now.getDay();
  const week = ['일', '월', '화', '수', '목', '금', '토'];
  let hours = now.getHours();
  const minutes = now.getMinutes();

  let ampm =  '';
  if(hours > 12){
    hours -= 12;
    ampm = '오후';
  }else ampm = '오전';

  // 화, 오후 12:36
  timeText.innerText = `${week[day]}, ${ampm} ${hours < 10 ? `0${hours}` : hours}:${minutes < 10 ? `0${minutes}` : minutes}`
}

(() => {
  clock();
  setInterval(clock, 1000);
})();