기념일 계산기
객체(object)
: 여러 개의 값을 담는 자료형.
ex)
var person = {
name: 'L'
age: 20
}속성 : 각각의 값
키(key, 속성명) : name, age
속성값(Value) : L, 20, 배열[], 객체{}, 함수 function() = method
객체.key
ex) person.name; -> L
Javascript의 거의 모든 것은 '객체'다
ex) console.log
console이라는 객체에 .log라는 method를 사용해서 콘솔화면에 글자를 표시해준 것
<script>
var person = {
name: 'L',
sayHello: function() { console.log('hello'); }
}
console.log(person.name);
person.sayHello();
</script>Date 객체 알아보기
Date 객체 참고문서
https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Date
1. Date 객체 생성
var now = new Date();
2. 연도를 가져오는 메서드 .getFullYear()
console.log(now.getFullYear());
3. 월 정보를 가져오는 메서드 .getMonth() {0: 1월, 1: 2월, ... 10: 11월, 11: 12월}
console.log(now.getMonth());
4. 일 정보를 가져오는 메서드 .getDate()
console.log(now.getDate());
5. 1970년 1월 1일 00:00:00을 기준으로 흐른 시간을 밀리초로 표시하는 메서드 .getTime()
console.log(now.getTime());
6. 특정 일의 Date 객체 생성
var christmas = new Date('2023-12-25');
console.log(christmas);
7. 특정 ms의 Date 객체 생성
var ms = new Date(1000);
console.log(ms);
ms : millisecond
기념일 계산기 만들기
우리 며칠째?
만난 밀리초 = 오늘.getTime() - 사귄날.getTime()
만난 일 = 만난 밀리초를 일로 환산
<script>
var now = new Date();
var start = new Date('2020-06-30);
var timeDiff = now.getTime() - start.getTime();
var day = Math.floor(timeDiff / (1000 * 60 * 60 * 24) + 1);
$('#love').text(day + '일째');
console.log(day);
</script>Math.floor : 소수점 날리기
기념일까지 남은 날짜는?
남은 밀리초 = 기념일.getTime() - 오늘.getTime()
만난일 = 만난 밀리초를 일로 환산
<script>
var now = new Date();
var start = new Date('2020-06-30);
var timeDiff = now.getTime() - start.getTime();
var day = Math.floor(timeDiff / (1000 * 60 * 60 * 24) + 1);
$('#love').text(day + '일째');
var valentine = new Date('2021-02-14');
var timeDiff2 = valentine.getTime() - now.getTime();
var day2 = Math.floor(timeDiff2 / (1000 * 60 * 60 * 24) + 1);
$(`#valentine').text(day2 + '일 남음');
</script>1000일은 언제인가?
1000일의 밀리초 = 사귄날.getTime() + 999일의.getTime()
1000일 = new Data(1000일의 밀리초)
<script>
var now = new Date();
var start = new Date('2020-06-30);
var timeDiff = now.getTime() - start.getTime();
var day = Math.floor(timeDiff / (1000 * 60 * 60 * 24) + 1);
$('#love').text(day + '일째');
var valentine = new Date('2021-02-14');
var timeDiff2 = valentine.getTime() - now.getTime();
var day2 = Math.floor(timeDiff2 / (1000 * 60 * 60 * 24) + 1);
$(`#valentine').text(day2 + '일 남음');
var ms = start.getTime() + 99 * (1000 * 60 * 60 * 24);
var thousand = new Date(ms);
var thousandDate = thousand.getFullYear() + '.' + (thousand.getMonth()+1) + '.' + thousand.getDate();
$('#thousand-date').text(thousandDate);
</script>오늘부터 1000일까지 며칠 남았는지
<script>
var now = new Date();
var start = new Date('2020-06-30);
var timeDiff = now.getTime() - start.getTime();
var day = Math.floor(timeDiff / (1000 * 60 * 60 * 24) + 1);
$('#love').text(day + '일째');
var valentine = new Date('2021-02-14');
var timeDiff2 = valentine.getTime() - now.getTime();
var day2 = Math.floor(timeDiff2 / (1000 * 60 * 60 * 24) + 1);
$(`#valentine').text(day2 + '일 남음');
var ms = start.getTime() + 99 * (1000 * 60 * 60 * 24);
var thousand = new Date(ms);
var thousandDate = thousand.getFullYear() + '.' + (thousand.getMonth()+1) + '.' + thousand.getDate();
$('#thousand-date').text(thousandDate);
// thousand, now, getTime()
var timeDiff3 = thousand.getTime() - now.getTime();
var day3 = Math.floor(timeDiff3 / (1000 * 60 * 60 * 24) + 1);
$(`#thousand').text(day3 + '일 남음');
</script>총정리
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous">
<title>기념일 계산기</title>
<style>
* {
color: #333333;
}
p {
margin-bottom: 1px;
}
.photos {
margin-top: 50px;
display: flex;
justify-content: center;
align-items: center;
}
#duhee {
width:150px;
height:150px;
object-fit:cover;
border-radius:50%;
margin-right: 30px;
}
#jisook {
width:150px;
height:150px;
object-fit:cover;
border-radius:50%;
margin-left: 30px;
}
#heart {
width:50px;
height:50px;
}
.gray {
color: #a0a0a0;
}
.special-day {
display: flex;
justify-content: space-between;
}
.title {
display: flex;
align-items: center;
}
.days-left {
text-align: right;
}
.date {
text-align: right;
color: #a0a0a0;
}
</style>
</head>
<body class="container">
<section class='photos'>
<img id='duhee' src="duhee.jpeg" alt="duhee">
<img id='heart' src="heart.png" alt="heart">
<img id='jisook' src="jisook.jpeg" alt="jisook">
</section>
<div class='container d-flex flex-column justify-content-center align-items-center mt-3'>
<h3>두희♥지숙</h3>
<h3 id='love'>0일째</h3>
<h4 class="date">2020.6.30</h4>
</div>
<hr/>
<section class='special-day'>
<h3 class='title'>발렌타인 데이</h3>
<div class='date-box'>
<p id='valentine' class='days-left'>0일 남음</p>
<p class='date'>2021.2.14</p>
</div>
</section>
<hr/>
<section class='special-day'>
<h3 class='title'>1000일</h3>
<div class='date-box'>
<p id='thousand' class='days-left'>0일 남음</p>
<p id='thousand-date' class='date'>0000.00.00</p>
</div>
</section>
<hr/>
<script
src="https://code.jquery.com/jquery-3.5.1.min.js"
integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0="
crossorigin="anonymous"></script>
<script>
var now = new Date();
var start = new Date('2020-06-30');
//우리 몇 일째?
var timeDiff = now.getTime() - start.getTime();
var day = Math.floor(timeDiff / (1000 * 60 * 60 * 24) + 1);
$('#love').text(day + '일째');
//기념일까지 남은 날짜는?
var valentine = new Date('2021-02-14');
var timeDiff2 = valentine.getTime() - now.getTime();
var day2 = Math.floor(timeDiff2 / (1000 * 60 * 60 * 24) + 1);
$('#valentine').text(day2 + '일 남음');
//천일은 언제인가?
var thousand = new Date(start.getTime() + 999 * (1000 * 60 * 60 * 24));
var thousandDate = thousand.getFullYear() + '.' + (thousand.getMonth()+1) + '.' + thousand.getDate();
$('#thousand-date').text(thousandDate);
//기념일까지 남은 날짜는?
var timeDiff3 = thousand.getTime() - now.getTime();
var day3 = Math.floor(timeDiff3 / (1000 * 60 * 60 * 24) + 1);
$('#thousand').text(day3 + '일 남음');
</script>
</body>
</html>