[js] 디데이 시간 날짜 카운트 계산하기 (ft. 자동 날짜 구하기)

자바스크립트 d-day 구하기

 

javascript를 이용하여

현재 날짜와 특정 날짜, 디데이를 구현합니다.

 

날짜나 시간 관련 정보를 제공받고 싶을 때는 날짜 객체를 생성합니다.
날짜 객체를 이용하면 달력과 특정 기념일 디데이 계산기를 만들 수 있습니다.

 

자바스크립트 날짜 메소드

• getFullYear() : 연도 정보를 가져옴
• getMonth() : 월 정보를 가져옴(현재 월 -1)
• getDate() : 일 정보를 가져옴
• getDay() : 요일 정보를 가져옴(일:0~토:6)
• getDay/getHours/getMinutes/getSeconds() : 시/분/초 정보를 가져옴
• getTime : 1970년 1월 1일부터 경과된 시간을밀리초로 표기함

 

디데이 계산기 만드는 방법

날짜 정보 객체를 이용하여 현재 날짜 정보와 특정 날짜 정보를 가져와
D-day계산기를 만드는 방법을 알아보겠습니다.

script

var today = new Date();
var dday = new Date(2020,10,30);
var gap = dday.getTime() - today.getTime();
var result = Math.ceil(gap / (1000 * 60 * 60 * 24));
document.write("D-day까지 " + result + "일 남았습니다.");

 

결과 디데이까지 0일 남았습니다.

아래의 설명글을 확인해주세요.

• var today = new Date(); //현재 날짜 정보를 제공하는 Date 객체입니다.
• var dday = new Date(2020,10,30); //디데이 날짜 정보를 제공하는 Date 객체입니다.
• 디데이: 2020년 11월 30일

* 여기서 중요한 것! 지정 날짜 = new Date(연, 월-1, 일); 월은 -1을 해주어야 합니다.
또는 var dday = new Date("november 30, 2020 0:00:00"); 로 생성합니다.

• var gap = dday.getTime() - today.getTime(); //남은 일 수(밀리초) = 특정 날짜 객체 - 현재 날짜 객체
• var result = Math.ceil(gap / (1000 * 60 * 60 * 24));
• 1초 = 1,000(msc)
• 1분(60초) = 1000 * 60
• 1시간(60분) = 1000 * 60 * 60
• 1일(60분*24) = 1000 * 60 * 60 * 24
  
  디데이 날짜에서 현재 날짜를 빼면 지금부터 남은 시간을 밀리초 단위로 구할 수 있습니다.
  남은 시간을 일 단위로 계산한 다음 오늘 날짜까지 포함시키기 위하여 Math.ceil() 메서드를 사용합니다.
  
  Math.ceil(숫자) : 소수점 첫째 자리에서 무조건 올림 하여 정수를 반홥합니다.

 

이번 년도 구하는 코드

홈페이지 푸터에 들어가는 저작권 관련 문구에 들어가는 이번 년도 해를 구할때,
자바스크립트 코드를 이용하면, 매해 마다 수정할 필요가 없습니다. 

ⓒ 2021 Goddino All Rights Reserved.

const thisYear = document.querySelector('.this-year');
thisYear.textContent = new Date().getFullYear();

 

디데이까지 남은 일/시간/분/초 구하기

html

div id="count" /div

 

script

var dday = new Date("November 30, 2020, 0:00:00").getTime();
setInterval(function() {
  var today = new Date().getTime();
  var gap = dday - today;
  var day = Math.ceil(gap / (1000 * 60 * 60 * 24));
  var hour = Math.ceil((gap % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
  var min = Math.ceil((gap % (1000 * 60 * 60)) / (1000 * 60));
  var sec = Math.ceil((gap % (1000 * 60)) / 1000);
  document.getElementById("count").innerHTML = "D-DAY까지 " + day + "일 " + hour + "시간 " + min + "분 " + sec + "초 남았습니다.";
}, 1000);

 

화면 보기(Result 클릭)