[자바스크립트] 시계 오전 오후로 나눠서 출력하기

 

오전 오후로 나누려면 hour 부분에 if문 축약형을 간단하게 사용해서 출력할 수 있다.

 

${hour<13?` 오전 ${(hour-12)<10?`0${(hour-12)}`:(hour-12)}`

:` 오후 ${(hour-12)<10?`0${(hour-12)}`:(hour-12)}`}시

 

→ hour가 13보다 작을 경우 오전을 붙이고 13부터는 오후가 붙음

→ 24시간이 아닌 12시간 표시로 나타내려면 hour에서 12를 뺴면 됨

→ 10보다 작은 수 앞에는 0이 붙도록 함

→ 하다보니 생각보다 가독성은 떨어짐

 

 

function getTime(){
    const date = new Date();
    const year = date.getFullYear();
    const month = date.getMonth();
    const day = date.getDate();
    const week = weekNames[date.getDay()];
    const hour = date.getHours();
    const min = date.getMinutes();
    const sec = date.getSeconds();
    clockTitle.innerText=`${year}년 ${(month+1)<10?`0${(month+1)}`:(month+1)}월 ${day<10?`0${day}`:day}일 ${week}요일 
    ${hour<13?` 오전 ${(hour-12)<10?`0${(hour-12)}`:(hour-12)}`:` 오후 ${(hour-12)<10?`0${(hour-12)}`:(hour-12)}`}시 ${min<10?`0${min}`:min}분 ${sec<10?`0${sec}`:sec}초`;
}

 

 

 

 

◆ 결과

현재 시간이 아닌 다른 시간대를 확인해보고 싶다면

컴퓨터의 표준시간대를 변경해서 보면 여러 시간대를 바로바로 확인 할 수 있다!

(나는 하와이에 다녀옴😎)