현재 시각을 십이지시로 바꿔보자 Ver.JS

현재 시각을 십이지시로 바꿔보자

여기서 했던 그거 맞다. 근데 실시간 시계는 안됨… setInterval 찾아봤는데 지금 코드 상태로는 안되고 실시간 시계는 죄다 함수 때려박은거라 아예 코드를 엎어야 할 수준이더라… 였는데 결국 해결 봤다.

---

const currentTime = document.querySelector(".currenttime");
const earthBranch = document.querySelector(".earthbranches");

일단 가져올 건 현재 시각 표시할거랑 십이지시 나타낼거 두 개밖에 없다.

function getCurtime() {
    let today = new Date;
    let todayYear = today.getFullYear();
    let todayMonth = today.getMonth() + 1;
    let todayDate = today.getDate();
    let todayHour = today.getHours();
    let todayMinute = today.getMinutes();
    let todaySecond = today.getSeconds();
    currentTime.innerText = `지금은 ${todayYear}년 ${todayMonth}월 ${todayDate}일 ${todayHour}시 ${todayMinute}분 ${todaySecond}초 입니다. `;
}

원래 함수 아니었는데 함수로 묶어버린 첫 번째 요소가 바로 이것. 현재 시각(년월일시분초)을 가져온 다음 DOM에 정해진 형식으로 표시한다.

function getEarthbranch(){
    let today = new Date;
    let todayHour = today.getHours();
    if (todayHour >= 1 && todayHour < 3) {
        earthBranch.innerText = '십이지시로 바꾸면 축(丑)시입니다. '
    }
    else if (todayHour >= 3 && todayHour < 5) {
        earthBranch.innerText = '십이지시로 바꾸면 인(寅)시입니다. '
    }
    else if (todayHour >= 5 && todayHour < 7) {
        earthBranch.innerText = '십이지시로 바꾸면 묘(卯)시입니다. '
    }
    else if (todayHour >= 7 && todayHour < 9) {
        earthBranch.innerText = '십이지시로 바꾸면 진(辰)시입니다. '
    }
    else if (todayHour >= 9 && todayHour < 11) {
        earthBranch.innerText = '십이지시로 바꾸면 사(巳)시입니다. '
    }
    else if (todayHour >= 11 && todayHour < 13) {
        earthBranch.innerText = '십이지시로 바꾸면 오(午)시입니다. '
    }
    else if (todayHour >= 13 && todayHour < 15) {
        earthBranch.innerText = '십이지시로 바꾸면 미(未)시입니다. '
    }
    else if (todayHour >= 15 && todayHour < 17) {
        earthBranch.innerText = '십이지시로 바꾸면 신(申)시입니다. '
    }
    else if (todayHour >= 17 && todayHour < 19) {
        earthBranch.innerText = '십이지시로 바꾸면 유(酉)시입니다. '
    }
    else if (todayHour >= 19 && todayHour < 21) {
        earthBranch.innerText = '십이지시로 바꾸면 술(戌)시입니다. '
    }
    else if (todayHour >= 21 && todayHour < 23) {
        earthBranch.innerText = '십이지시로 바꾸면 해(亥)시입니다. '
    }
    else if (todayHour == 0 && todayMinute == 0) {
        earthBranch.innerText = '십이지시로 바꾸면 자(子)시입니다. 0시 0분이므로 자정이네요. '
    }
    else if (todayHour == 12 && todayMinute == 0) {
        earthBranch.innerText = '십이지시로 바꾸면 오(午)시입니다. 12시 0분이므로 정오네요. '
    }
    else {
        earthBranch.innerText = '십이지시로 바꾸면 자(子)시입니다. '
    }
}

현재 ‘시’에 따라 해당하는 십이지시를 출력하는 코드인데, 파이썬과 달리 두 가지가 추가되었다. 일단 0시 0분에는 자정, 12시 0분에는 정오라고 별도의 멘트가 뜨게 된다.

getCurtime();
setInterval(getCurtime, 1000);
getEarthbranch();
setInterval(getEarthbranch, 1000);

이거는 실시간 시계를 만들기 위해 필요하다. setInterval()을 통해 현재 시각을 가져오는 함수와 그걸 십이지시로 바꾸는 함수를 1초 간격으로 실행하는거다. 아래꺼는 원래 setInterval() 안했었는데 10시에서 11시 넘어가는데 십이지시가 자동으로 안바뀌더라고.

그래서 이렇게 됐다. CSS는 wrapper랑 웹폰트 외에 아무것도 안 줬다.