크리스마스까지의 날짜 및 시간 카운트다운 계산하기
html
<!DOCTYPE html>
<html>
<head>
<title>Parcel Sandbox</title>
<meta charset="UTF-8" />
</head>
<body>
<h2>Time Until Christmas</h2>
<div class="js-x-mas">
<h2>00:00</h2>
</div>
<script src="src/index.js"></script>
</body>
</html>java script
const clockContainer = document.querySelector(".js-x-mas"),
dDay = clockContainer.querySelector("h2");
function getTime() {
const xmasDay = new Date("2021-12-24:00:00:00+0900");
const today = new Date();
const gap = xmasDay.getTime() - today.getTime();
const date = Math.ceil(gap / (60 * 60 * 24 * 1000));
const hours = Math.floor((gap % (60 * 60 * 24 * 1000)) / (60 * 60 * 1000));
const minutes = Math.floor((gap % (60 * 60 * 1000)) / (60 * 1000));
const seconds = Math.floor((gap % (60 * 1000)) / 1000);
dDay.innerText = `${date < 10 ? `0${date}` : date}d ${
hours < 10 ? `0${hours}` : hours
}h ${minutes < 10 ? `0${minutes}` : minutes}m ${
seconds < 10 ? `0${seconds}` : seconds
}s `;
}
function init() {
getTime();
setInterval(getTime, 1000);
}
init();코드리뷰
먼저 html에 js-x-mas 라는 클래스를 가진 div태그를 만들고
그안에 h2태그를 작성하였다.
그리고 자바스크립트에 querySelector를 사용하여 클래스를 가져온 후
자식요소인 h2태그를 가져왔다.
카운트다운값을 d-day 에서 현재시간을 빼는 형식으로 구하는 코드를 작성해 보았다.
getTime 은 1970 년 1 월 1 일 00:00:00 UTC와 주어진 날짜 사이의 경과 시간 (밀리 초)를 가져오는
메소드이다.
d-day 와 현재시간을 const로 지정하고
getTime 메소드를 이용하여 xmasDay.getTime() - today.getTime(); 이런식으로 식을 작성하여 변수로 지정하였다.
그 변수에 들어간 값은 앞으로 남은시간을 ms(밀리 초) 반환한 값이다.
구해야 할 값들인 date와 hours minutes seconds를 const로 지정하고
ms를 날짜 시간 분 초로 나누는 식을 각각의 변수에 작성한다.
innerText로 html h2태그에 접근하여 순차적으로 변수를 넣고 텍스트를 완성한다.
init이라는 항시 실행되는 함수를 만들고 그안에 코드를 넣고 실행시킨다.
setInterval이라는 메소드는 첫째로 실행할 함수 두번째로 자동으로 실행될 시간간격을 인수로 받는다.
여기서 시간간격은 ms로 계산하여 기입한다.
