날짜를 입력 받으면 100일 200일 1년 500일을 자동으로 계산 할 수 있는 프로그램을 자바스크립트로 구현해 보았고 Date 객체를 사용하였다.
1. html 코드
<!doctype html>
<html lang="ko">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>D-Day for love</title>
<link href="css/d-day.css" rel="stylesheet">
</head>
<body>
<div class="container">
<div class="day1">
<h3>우리 만난지</h3>
<form>
<input type="text" id="accent" >
<button id = "calculation">계산하기</button>
</form>
<div>
</div>
</div>
<div class="bar">기념일 계산</div>
<div class="day2">
<ul>
<li class="item-title">100일</li>
<li class="item-date" id="date100"></li>
</ul>
<ul>
<li class="item-title">200일</li>
<li class="item-date" id="date200"></li>
</ul>
<ul>
<li class="item-title">1년</li>
<li class="item-date" id="date365"></li>
</ul>
<ul>
<li class="item-title">500일</li>
<li class="item-date" id="date500"></li>
</ul>
</div>
</div>
<script src="js/dday.js"></script>
</html>2. 자바스크립트 변수와 함수선언
var 입력 = document.querySelector('#accent');
var 계산 = document.querySelector("#calculation");
var 현재 = new Date();
function 일수계산기 (num){
var 입력값 = 입력.value;
var 과거 = new Date(입력값);
var 밀리초일수 = 과거.getTime() + num*(1000*60*60*24);
var 일수 = new Date(밀리초일수);
var 년 = 일수.getFullYear();
var 월 = 일수.getMonth()+1;
var 일 = 일수.getDate()-1;
var 데이트 = document.querySelector("#date" + num);
데이트.textContent = 년 + "년" + 월 + "월" + 일 + "일";
}
입력,계산,현재 변수에 html 코드와 Date객체를 저장하였다. 일수계산기 함수에는 일 수 계산을 위해 함수를 반복하고 싶지 않아 num을 요소값을 넣었다.
그 이후 과거 변수에 new Date객체를 만들어 주었는데 (입력값)을 넣어줄때는 변수를 선언해서 넣어주거나 날짜 (2020-09-10) 과 같은 형식의 값을 넣어주는 것이 좋다.
밀리초일수 변수에는 밀리초를 바꿔주는 메소드인 getTime을 사용하여 년,월,일을 밀리초로 바꿔 주었고 그 이후 num x (1000 x 60 x 60 x 24) 값은 일수를 넣어주면 밀리초로 바꿔주는 값으로 넣어주었다.
년,월,일 변수는 밀리초를 다시 년 월 일로 바꾸어 주는 메소드를 사용하였다.
사용 메소드
- getTime() Date값을 밀리초로 바꿔줌
- getFullYear() 밀리초 값을 년으로 바꿔줌
- getMonth() 밀리초 값을 월로 바꿔줌
- getDate() 밀리초 값을 일로 바꿔줌
3. 자바스크립트 addEventListener 구현
계산.addEventListener('click', function(e){
e.preventDefault();
일수계산기(100);
일수계산기(200);
일수계산기(365);
일수계산기(500);
});
addEventListener을 사용하여 계산버튼을 클릭하면 위에서 만든 함수의 값을 넣어줘 계산을 하게된다.
4. 전체코드
var 입력 = document.querySelector('#accent');
var 계산 = document.querySelector("#calculation");
var 현재 = new Date();
function 일수계산기 (num){
var 입력값 = 입력.value;
var 과거 = new Date(입력값);
var 밀리초일수 = 과거.getTime() + num*(1000*60*60*24);
var 일수 = new Date(밀리초일수);
var 년 = 일수.getFullYear();
var 월 = 일수.getMonth()+1;
var 일 = 일수.getDate()-1;
var 데이트 = document.querySelector("#date" + num);
데이트.textContent = 년 + "년" + 월 + "월" + 일 + "일";
}
계산.addEventListener('click', function(e){
e.preventDefault();
일수계산기(100);
일수계산기(200);
일수계산기(365);
일수계산기(500);
});
5. 부족했던 점
-
new Date() 객체를 생성할때 값을 넣을때 변수를 선언하지 않고 넣었는데 작동하지 않았다.
-
밀리초로 바꾸지 않고 바로 값을 넣을려 그랬는데 밀리초로 바꾸는 과정이 꼭 필요했다.
