자바 스크립트를 이용해 생일까지 남은 날짜를 계산하는 방법입니다.
날짜만 설정하면 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을 원하는 날짜로 수정하시면 됩니다.
