[자바스크립트] 생일까지 남은 날짜 계산하기

Github

Demo

자바 스크립트를 이용해 생일까지 남은 날짜를 계산하는 방법입니다.

날짜만 설정하면 D-day에 Happy Birthday!란 메시지를 출력해주고, D-day 다음 날부터는 자동으로 내년으로 D-day를 변경합니다.

스크린 샷에서 아실 수 있듯, 초 단위로 표시해주며 0.5초마다 html의 내용을 갱신합니다.

굳이 초 단위는 필요 없으시면 초와 관련된 js를 제거하시고 갱신 주기를 늘려주세요.

HTML

<section id="birthday">

<div><span id="dday"></span> 남았습니다!<div>

</section>

JS

var v = new Date().getFullYear(),

z = new Date("Apr 23, " + v + " 00:00:00").getTime(),

x = setInterval(function() {

var f = new Date().getTime(),

g = z - f,

y = g / 864e5,

a = Math.floor(g / 864e5),

b = Math.floor(g % 864e5 / 36e5),

c = Math.floor(g % 36e5 / 6e4),

d = Math.floor(g % 6e4 / 1e3),

zz = v + 1,

aa = new Date("Apr 23, " + zz + " 00:00:00").getTime(),

bb = aa - f,

cc = bb / 864e5,

dd = Math.floor(bb / 864e5),

ee = Math.floor(bb % 864e5 / 36e5),

ff = Math.floor(bb % 36e5 / 6e4),

gg = Math.floor(bb % 6e4 / 1e3);

if (y <= -1) {

document.getElementById("dday").innerText = `${dd}일 ${ee}시간 ${ff}분 ${gg}초`

}

else {

if (0 >= g) {

clearInterval(x), document.getElementById("birthday").innerHTML = "Happy Birthday!!", document.getElementById("birthday").classList.add("dday")

}

else {

document.getElementById("dday").innerText = `${a}일 ${b}시간 ${c}분 ${d}초`

}

}

}, 500)

Apr 23을 원하는 날짜로 수정하시면 됩니다.