디데이를 나타내줄 태그에 id 값을 지정해준다.
index.html
<!DOCTYPE html>
<html>
<head>
<title>Time Until Christmas</title>
<meta charset="UTF-8" />
</head>
<body>
<h1>Time Until Christmas</h1>
<h2 class="js-clock"></h2>
<script src="src/index.js"></script>
</body>
</html>
querySelector을 사용해 id 값으로 찾은 h2 요소를 변수에 저장해준다.
const clockTitle = document.querySelector(".js-clock");
함수를 만들고 2022년 12월 25일 기준과 현재를 기준으로 변수 2개를 만든다.
function getChristmasEve() {
// Sat Dec 25 2021 00:00:00 GMT+0900 (한국 표준시)를 생성
const christmas = new Date(`${new Date().getFullYear()}-12-25:00:00:00+0900`);
const today = new Date();
}
diff 변수를 두어 위에서 선언한 2개의 변수를 빼준다.
function diffDay() {
const christmas = new Date(`${new Date().getFullYear()}-12-25:00:00:00+0900`);
const today = new Date();
// Date 함수로 생성한 Date 객체는 연산이 가능
const diff = new Date(christmas - today);
}
diff 변수를 날짜, 시간, 분, 초에 맞게 나눠준다.
// 1초는 1*1000
// 미리 초 단위의 값을 가지고 있는 difference변수를 1000으로 나눠주어 secondsInMs에 저장
// 1시간은 60분, 1분은 60초, 하루는 24시간으로 나눠준다.
const secondsInMs = Math.floor(diff / 1000);
const minutesInMs = Math.floor(secondsInMs / 60);
const hoursInMs = Math.floor(minutesInMs / 60);
const days = Math.floor(hoursInMs / 24);
// 출력되는 값들은 크리스마스까지 남은 일수, 시간, 분, 초이므로
// 나머지 값을 얻을 수 있는 % 연산을 사용
// % 연산을 할 때 시간, 분, 초의 단위에 맞춰 60 또는 24로 나눠주면 된다.
const hours = String(hoursInMs % 24).padStart(2, "0");
const min = String(minutesInMs % 60).padStart(2, "0");
const sec = String(secondsInMs % 60).padStart(2, "0");
아까 가져온 h2 요소에 .innerText를 사용해 추가해준다.
const clockTitle = document.querySelector(".js-clock");
function getChristmasEve() {
// Sat Dec 25 2021 00:00:00 GMT+0900 (한국 표준시)를 생성
const christmas = new Date(`${new Date().getFullYear()}-12-25:00:00:00+0900`);
const today = new Date();
// Date 함수로 생성한 Date 객체는 연산이 가능
const diff = new Date(christmas - today);
// 1초는 1*1000
// 미리 초 단위의 값을 가지고 있는
// difference변수를 1000으로 나눠주어 secondsInMs에 저장해 줍니다
const secondsInMs = Math.floor(diff / 1000);
const minutesInMs = Math.floor(secondsInMs / 60);
const hoursInMs = Math.floor(minutesInMs / 60);
const days = Math.floor(hoursInMs / 24);
console.log(days);
// 출력되는 값들은 크리스마스까지 남은 일수, 시간, 분, 초이므로
// 나머지 값을 얻을 수 있는 %연산을 사용
const hours = String(hoursInMs % 24).padStart(2, "0");
const min = String(minutesInMs % 60).padStart(2, "0");
const sec = String(secondsInMs % 60).padStart(2, "0");
clockTitle.innerHTML = `${days}d ${hours}h ${min}m ${sec}s`;
}
setInterval( )을 사용해 1초 간격으로 지속적으로 함수를 호출한다.
const clockTitle = document.querySelector(".js-clock");
function getChristmasEve() {
// Sat Dec 25 2021 00:00:00 GMT+0900 (한국 표준시)를 생성
const christmas = new Date(`${new Date().getFullYear()}-12-25:00:00:00+0900`);
const today = new Date();
// Date 함수로 생성한 Date 객체는 연산이 가능
const diff = new Date(christmas - today);
// 1초는 1*1000
// 미리 초 단위의 값을 가지고 있는 difference변수를 1000으로 나눠주어
// secondsInMs에 저장해 줍니다
const secondsInMs = Math.floor(diff / 1000);
const minutesInMs = Math.floor(secondsInMs / 60);
const hoursInMs = Math.floor(minutesInMs / 60);
const days = Math.floor(hoursInMs / 24);
console.log(days);
// 출력되는 값들은 크리스마스까지 남은 일수, 시간, 분, 초이므로
// 나머지 값을 얻을 수 있는 %연산을 사용
const hours = String(hoursInMs % 24).padStart(2, "0");
const min = String(minutesInMs % 60).padStart(2, "0");
const sec = String(secondsInMs % 60).padStart(2, "0");
clockTitle.innerHTML = `${days}d ${hours}h ${min}m ${sec}s`;
}
getChristmasEve();
setInterval(getChristmasEve, 1000);
728x90
'Frontend > JavaScript' 카테고리의 다른 글
| 바닐라 JS로 크롬 앱 만들기 ( #7 TO DO LIST(1) ) (0) | 2022.04.22 |
|---|---|
| 바닐라 JS로 크롬 앱 만들기 (#6 QUOTES AND BACKGROUND) (0) | 2022.04.22 |
| 바닐라 JS로 크롬 앱 만들기 (#5 CLOCK) (0) | 2022.04.21 |
| 바닐라 JS로 크롬 앱 만들기 (#4 Login) (0) | 2022.04.18 |
| 바닐라 JS로 크롬 앱 만들기 (#3) (0) | 2022.04.15 |
