티스토리 디데이 D-Day 기능 만드는 방법

이번에는 간단하게 디데이 기능을 만드는 방법을 알려드리고자 합니다. 날짜 정보만 있으면 되므로 생각보다 쉽게 만들 수 있으니 잘 따라오시기 바랍니다.

 

블로그에 넣을 기능이므로 자바스크립트 함수로 작성을 하였습니다.

 

목차

 

D-Day 계산 함수 작성

목표 일자를 파라미터로 받는 함수 하나를 간단히 작성해 보겠습니다.

function calcDday(date) {
    var now = new Date();
    var today = new Date(now.getFullYear(), now.getMonth(), now.getDate());
    var base = new Date(date.substring(0,4), Number(date.substring(4,6))-1, date.substring(6,8));
    var dDay = (today - base) / 1000 / 60 / 60 / 24;
    if(dDay < 0) {
        return "D" + dDay;
    } else if(dDay == 0) {
        return "D-day!";
    } else {
        return "D+" + dDay;
    }
}

어려울 것이 없습니다. 오늘 일자를 구해서 파라미터로 받은 날짜를 빼면 밀리초 단위로 결과가 나오는데 1000밀리초, 60초, 60분, 24시간으로 나누면 원하는 일수가 나옵니다. 그 값이 0보다 작다면 D-xxx, 0이라면 D-day!, 0보다 크다면 D+xxx로 값을 반환한 것이 전부입니다.

 

D-Day 적용 예시

함수에 다양한 케이스의 날짜를 대입해 보았더니 결과 값이 잘 나오는 것을 확인할 수 있었습니다.

 

이를 활용하여 다음과 같이 적용이 가능합니다.

 

도움이 되시길 바랍니다.