자바스크립트를 사용해 남은 날짜수를 구해보겠다.
이는 D-Day 기능처럼 사용할 수 있다.
자바스크립트 D-Day 기능 만들기
우선, 디데이 기능을 만들어보기 위해서
기준일자를 정할 것인데 나는 '크리스마스 12월 25일'로 하겠다.
우선 완성된 디데이 기능은 아래와 같다.
일, 시간, 분, 초를 나타내주었다.
쉬우면서도 유용하니 같이 한번 해 보도록 하자.
1. 디데이를 나타내줄 태그에 id 값을 지정해준다.
index.html 파일
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Christmas Time</title>
</head>
<body>
<h1>Time Until Christmas</h1>
<h2 id="remain-time"></h2>
<script src="src/app.js"></script>
</body>
</html>
2. querySelector을 사용해 id 값으로 찾은 h2 요소를 변수에 저장해준다.
app.js 파일
const remainTime = document.querySelector("#remain-time");
3. 함수를 만들고 2022년 12월 25일 기준과 현재를 기준으로 변수 2개를 만든다.
function diffDay() {
const masTime = new Date("2022-12-25");
const todayTime = new Date();
}
3. diff 변수를 두어 위에서 선언한 2개의 변수를 빼준다.
function diffDay() {
const masTime = new Date("2022-12-25");
const todayTime = new Date();
const diff = masTime - todayTime;
}
console.log(masTime);
console.log(diff);
console로 변수 2개를출력했을 때
엄청 큰 수가 출력되는 것을 볼 수 있다.
이것은 자바스크립트에 내장되어 있는 객체인 Date를 사용했을 때
2022 09:00:00 GMT+0900 (한국 표준시)를
"밀리세컨드 단위"로 나타내었기 때문에 수가 큰 것이다.
이 부분이 가장 중요하다.
4. diff 변수를 날짜, 시간, 분, 초에 맞게 나눠준 후에 Math.floor( )을 사용한다.
function diffDay() {
const masTime = new Date("2022-12-25");
const todayTime = new Date();
const diff = masTime - todayTime;
const diffDay = Math.floor(diff / (1000*60*60*24));
const diffHour = Math.floor((diff / (1000*60*60)) % 24);
const diffMin = Math.floor((diff / (1000*60)) % 60);
const diffSec = Math.floor(diff / 1000 % 60);
}
위에서 언급했듯이
"밀리세컨드 단위"로 출력이 된다.
그럼 우리는 밀리세컨드 단위를 사용해 날짜, 시간, 분, 초를 가지고 와야 한다.
밀리세컨드 단위이기 때문에 1초는 1*1000 이라고 할 수 있다.
우선 diffDay를 살펴보자.
날짜를 나타내려면
밀리세컨드 초를 60초, 60분, 24시간으로 나눠주면 된다.
이거 뭔가 수학 시간에 했던 기억이 있다.. ?
그리고 diffHour은 60초, 60분까지 나눠준 후에
24시간으로 나눴을 때의 나머지를 활용해 나타내주면 된다.
이해가 안 된다면...
계속 생각을 해보자.. !
Math.floor( ) 함수는 주어진 수의 같거나 작은 정수 중 큰 수를 반환한다고 한다.
쉽게 이해하면 소수 부분을 버림한다는 말이다.
깔끔하게 정수 부분만 나타내준다.
5. 아까 가져온 h2 요소에 .innerText를 사용해 추가해준다.
const remainTime = document.querySelector("#remain-time");
function diffDay() {
const masTime = new Date("2022-12-25");
const todayTime = new Date();
const diff = masTime - todayTime;
const diffDay = Math.floor(diff / (1000*60*60*24));
const diffHour = Math.floor((diff / (1000*60*60)) % 24);
const diffMin = Math.floor((diff / (1000*60)) % 60);
const diffSec = Math.floor(diff / 1000 % 60);
remainTime.innerText = `${diffDay}일 ${diffHour}시간 ${diffMin}분 ${diffSec}초`;
}
6. setInterval( )을 사용해 1초 간격으로 지속적으로 함수를 호출한다.
앞에 함수를 호출한 이유는 브라우저가 JS파일을 호출했을 때, setInterval 실행 전의 딜레이를 없애기 위함이다.
const remainTime = document.querySelector("#remain-time");
function diffDay() {
const masTime = new Date("2022-12-25");
const todayTime = new Date();
const diff = masTime - todayTime;
const diffDay = Math.floor(diff / (1000*60*60*24));
const diffHour = Math.floor((diff / (1000*60*60)) % 24);
const diffMin = Math.floor((diff / (1000*60)) % 60);
const diffSec = Math.floor(diff / 1000 % 60);
remainTime.innerText = `${diffDay}일 ${diffHour}시간 ${diffMin}분 ${diffSec}초`;
}
diffDay();
setInterval(diffDay, 1000);
실행하면 아래와 같이 출력되는데
디자인이 예쁘지 않으니 이 부분은 알아서 꾸며보도록 하자.
7시간처럼 1자릿수면 예뻐 보이지 않을 수가 있다.
이 경우는 아랫글을 보고 직접 구현해보도록 하자.
[JS] 실시간 시계 두자릿수 출력 / Date 두 자리수 만들기
[JS] 실시간 시계 두자릿수 출력 / Date 두 자리수 만들기 / 시계 만들기 / padStart() / getDate()
오늘은 자바스크립트를 활용해 홈페이지에 '시계'를 출력해볼 것이다. HTML 요소와 Javascript를 활용해 시계 만들어보기. 순서는 아래와 같다. 1. HTML 파일에 시계를 출력할 태그를 생성하고 id 값을
parkjh7764.tistory.com
2자릿수로 나타내려면 아래와 같이 코드를 작성하면 된다.
const remainTime = document.querySelector("#remain-time");
function diffDay() {
const masTime = new Date("2022-12-25");
const todayTime = new Date();
const diff = masTime - todayTime;
const diffDay = String(Math.floor(diff / (1000*60*60*24)));
const diffHour =String( Math.floor((diff / (1000*60*60)) % 24)).padStart(2,"0");
const diffMin = String(Math.floor((diff / (1000*60)) % 60)).padStart(2,"0");
const diffSec = String(Math.floor(diff / 1000 % 60)).padStart(2,"0");
remainTime.innerText = `${diffDay}일 ${diffHour}시간 ${diffMin}분 ${diffSec}초`;
}
diffDay();
setInterval(diffDay, 1000);
댓글