<html>
<body>
<div class="container">
<div class="day1">
<h3>우리 만난지</h3>
<p id="accent" class="accent"><span style="font-size:0.6em; font-style:italic">며칠?</span></p>
</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">1년</li>
<li class="item-date" id="date365"></li>
</ul>
</div>
</div>
<script src="./js/dday.js"></script>
<Js>
const now = new Date();
const firstDay = new Date("2019-07-07");
const toNow = now.getTime(); //getTime() 함수는 밀리초를 반환한다.
const toFirst = firstDay.getTime();
const passedTime = toNow - toFirst;
const passedDay = Math.round(passedTime / (1000 * 60 * 60 * 24)); //밀리초를 날짜로 바꾸고 반올림
document.querySelector("#accent").innerText = `${passedDay}일`;
calcDate(100);
calcDate(365);
//중복되는 코드가 많으므로 100일,365일을 매개변수로 둔 함수를 만든것
function calcDate(day) {
const future = toFirst + day * (1000 * 60 * 60 * 24);
const someday = new Date(future);
const year = someday.getFullYear();
const month = someday.getMonth() + 1; //월은 +1을 해줘야 정확한 일수가 나온다.
const date = someday.getDate();
document.querySelector("#date" + day).innerText = `${year}년 ${month}월 ${date}일`;
}
<실행결과>
※ 본 포스팅은 개인 공부 기록을 목적으로 남긴 글이며 본 사실과 다른 부분이 있다면 과감하게 지적 부탁드립니다.
'Javascript > Javascript 기본' 카테고리의 다른 글
| 생성자 함수를 사용해 객체생성 (0) | 2020.07.24 |
|---|---|
| 이미지 슬라이드 쇼 (0) | 2020.07.24 |
| 객체 (0) | 2020.07.23 |
| 숫자 맞추기 게임 (0) | 2020.07.23 |
| 함수와 이벤트 (0) | 2020.07.23 |
댓글