html, css, javasacript
기념일 계산기
▶자바스크립트의 날짜, 시간 입력
| YYYY | 연도 (4자리) |
| MM | 월 (2자리) |
| DD | 일 (2자리) |
| HH | 시 (2자리) |
| MM | 분 (2자리) |
| SS | 초 (2자리) |
| ISO형식(YYYY-MM-DDTHH:MM:SS) | |
| 긴 날짜 형식(MMM DD YYYY) | · 월, 일, 연도 순 · 월은 숫자가 아닌, 영문으로 작성해야 함(January, Jan과 같은) |
| 짧은 날짜 형식(MM/DD/YYYY) | · 월, 일, 연도 순 |
▶자바스크립트 시간 단위
| 1밀리초 = 1/1,000초 |
| 1초 = 1,000밀리초 |
| 1분 = 60초 (= 1,000 * 60 = 60,000밀리초) |
| 1시간 = 60분 (= 1,000 * 60 * 60 = 3,600,000밀리초) |
| 1일 = 24시간 (= 1,000 * 60 * 60 * 24 = 86,400,000밀리초) |
▶getTime() 함수가 바로 시, 분, 초 단위로 나오지 않고
밀리초로 나오기 때문에
밀리초를 통해 → 다른 단위로 변환시켜야 한다. (위 '자바스크립트 시간 단위' 참조)
▶javascript/ date객체
console창에 new Date()를 입력하면
바로 지금 나우 이 순간의 날짜와 시간이 결과로 나타난다.
Date객체의 인스턴스를 → now변수에 저장함
저장시킨 이후에는(이 말인 즉, var now = new Date를 적은 이후)
now객체는 Date객체의 속성과 함수를 사용할 수 있다.
두번째 줄의 now는 이를 이용해 오늘 날짜와 시간을 결과로 소환한 것.
▶javascript/ 자바스크립트의
document.querySelector('#accent').innerText = passedDay + "일"; 요 부분을 통해 '얼마나'가 → '182일'로 변환된다.
브라우저 창에서 확인하면,
요 부분이 없을 때는 '얼마나' → 요 부분을 넣으면 '182일'
▶javascript/ 번거로운 계산
var future = toFirst + 100 * (100*60*60*24);
var someday = new Date(future);
var year = someday.getFullYear();
var month = someday.getMonth();
var date = someday.getDate();
Document.querySelector("#date100").innerText = year + " 년 " + month + " 월 " + date + " 일 ";
var future = toFirst + 365 * (100*60*60*24);
var someday = new Date(future);
var year = someday.getFullYear();
var month = someday.getMonth();
var date = someday.getDate();
Document.querySelector("#date365").innerText = year + " 년 " + month + " 월 " + date + " 일 ";future = toFirst + 100 * (100*60*60*24);
someday = new Date(future);
year = someday.getFullYear();
month = someday.getMonth();
date = someday.getDate();
Document.querySelector("#date100").innerText = year + " 년 " + month + " 월 " + date + " 일 ";
future = toFirst + 365 * (100*60*60*24);
someday = new Date(future);
year = someday.getFullYear();
month = someday.getMonth();
date = someday.getDate();
Document.querySelector("#date365").innerText = year + " 년 " + month + " 월 " + date + " 일 ";위의 두 방식대로 하면
100일 기념일, 365일 기념일... 등등 기념일 마다 매번 계산식을 작성해야 함
▶javascript/ 이 때 calcDate()함수를 이용하면,
function calcDate(days) {
var future = toFirst + days * (100*60*60*24);
var someday = new Date(future);
var year = someday.getFullYear();
var month = someday.getMonth();
var date = someday.getDate();
Document.querySelector("#date" + days).innerText = year + " 년 " + month + " 월 " + date + " 일 ";
}
calcDate(100); //100일 기념일
calcDate(365); //365일 기념일
calcDate(500); //500일 기념일
calcDate(1000); //1000일 기념일function calcDate(days) {} 함수선언을 통해
일일이 계산할 필요가 없어진다.
▶javascript/ 아래의 함수호출 부분은
calcDate(100); //100일 기념일
calcDate(365); //365일 기념일
calcDate(500); //500일 기념일
calcDate(1000); //1000일 기념일function calcDate(days) {} 함수의 앞, 뒤 어느 부분에 넣어도 상관 없음.
결과
▶html
<!DOCTYPE html>
<html lang="ko">
<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>aniversary calclulator</title>
<link href="anniversary-calculator.css" rel="stylesheet">
</head>
<body>
<div class="container">
<div class="day1">
<h5>처음 만난 날로부터</h5>
<p id="accent" class="accent">
<span style="font-size:0.9em; 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">365일</li>
<li class="item-date" id="date365"></li>
</ul>
<ul>
<li class="item-title">500일</li>
<li class="item-date" id="date500"></li>
</ul>
<ul>
<li class="item-title">1000일</li>
<li class="item-date" id="date1000"></li>
</ul>
</div>
</div>
<script src="anniversary-calculator.js"></script>
</body>
</html>
▶css
* {
box-sizing: border-box;
}
.container{
width:500px;
margin:0 auto;
border:10px solid rgb(253, 208, 111);
border-radius:2%;
box-shadow:2px 2px 2px rgb(97, 97, 97, 0.5);
}
.day1 {
padding-top:40px;
text-align:center;
font-family: '배달의민족 한나';
font-size:1em;
}
.day1 h5 {
font-size:0.8em;
color:rgb(145, 145, 145);
}
.accent {
margin-left:10px;
margin-right:10px;
margin-top:10px;
font-family: '배달의민족 주아';
font-weight: normal;
font-size:4em;
color:rgb(20, 124, 98);
}
.bar {
width:100%;
margin:60px auto 0 auto;
padding-left:80px;
height:50px;
background:rgb(20, 124, 98);
font-family: '배달의민족 한나';
font-size:1em;
color:#fff;
line-height:55px;
}
.day2 {
font-family: '배달의민족 주아';
font-size:1em;
letter-spacing:-1.2pt;
width:420px;
margin:20px auto 20px auto;
}
.day2 ul {
list-style: none;
border-bottom:1px dashed #ccc;
height:70px;
}
.day2 ul:last-child {
border-bottom:none;
}
.item-title {
float:left;
width:160px;
font-weight:bold;
font-size:1.5em;
line-height:60px;
}
.item-date {
float:left;
margin-left:60px;
font-size:1.2em;
color:#222;
text-align:right;
line-height:60px;
}
▶javascript
var now = new Date();
var firstDay = new Date("2020-12-25")
var toNow = now.getTime();
var toFirst = firstDay.getTime();
var passedTime = toNow - toFirst;
var passedDay = Math.round(passedTime/(1000*60*60*24));
document.querySelector('#accent').innerText = passedDay + "일";
function calcDate(days) {
var future = toFirst + days * (1000*60*60*24);
var someday = new Date(future);
var year = someday.getFullYear();
var month = someday.getMonth();
var date = someday.getDate();
document.querySelector("#date" + days).innerText = year + " 년 " + month + " 월 " + date + " 일 ";
}
calcDate(100); //100일 기념일
calcDate(365); //365일 기념일
calcDate(500); //500일 기념일
calcDate(1000); //1000일 기념일
document.querySelector 에서
document의 소문자d를 대문자D로 쓴 줄도 모르고 화면에 아무 것도 안 떠서 몇 시간이나 헤맸다.
예상치 못한 실수였는데,
그렇다고 설마 저거 하나 때문에 브라우저에 결과값이 보이지 않을 거라고는 생각지도 못했다.