크리스마스 이브 Day 계산
<!DOCTYPE html>
<html>
<head>
<title>Time Until Christmas Eve<</title>
<meta charset="UTF-8" />
</head>
<body>
<h1>Time Until Christmas Eve</h1>
<h2 class="js-clock">00:00</h2>
<script src="src/index.js"></script>
</body>
</html>
const clockTitle = document.querySelector(".js-clock");
function getXmasDistance() {
//현재 일시
const now = new Date();
//크리스마스 일시
const xmas = getNextXmas();
return xmas - now; //크리스마스 지정일 - 현재시간
}
//내년도 날짜 반환
function getNextXmas() {
const now = new Date();
const year = now.getFullYear();
const xmas = new Date(`${year}.12.24 00:00:00+0900`);
if (xmas - now < 0) {
return new Date(`${year + 1}.12.24 00:00:00+0900`);
}
return xmas;
}
//크리스마스 지정일 - 현재시간 차이 시간을 통해서 크리스마스 d-day 계산
function distanceToString(distance) {
const distanceDay = Math.floor(distance / (1000 * 60 * 60 * 24));
const distanceHours = Math.floor(
(distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60)
);
const distanceMinutes = Math.floor(
(distance % (1000 * 60 * 60)) / (1000 * 60)
);
const distanceSecondes = Math.floor((distance % (1000 * 60)) / 1000);
return `${distanceDay}일 ${distanceHours}시 ${distanceMinutes}분 ${distanceSecondes}초`;
}
function updateClock() {
clockTitle.innerHTML = distanceToString(getXmasDistance());
}
updateClock();
setInterval(updateClock, 1000);'웹 개발 > 바닐라js' 카테고리의 다른 글
| [드림코딩] 윈도우 사이즈 가져오기 (0) | 2021.09.21 |
|---|---|
| [노마드코더] 바닐라JS 챌린지 - 랜덤 그라데이션 백그라운드 (0) | 2021.09.02 |
| [노마드코더] 바닐라JS 챌린지 - 숫자 입력 게임 (0) | 2021.08.31 |
| [노마드코더] 바닐라JS 챌린지 - resize발생시 배경화면 색 변경 (0) | 2021.08.27 |
| [노마드코더] 바닐라JS 챌린지 - 마우스 이벤트, 윈도우 사이즈 - 글자 색변 경하기 (0) | 2021.08.27 |
[노마드코더] 바닐라JS 챌린지 - 크리스마스 이브 D-day 계산기