Javascript/GMA(2302~)

23.04.19 자바스크립트 내장객체(*Date 객체)

hyerin1201 2023. 4. 19. 22:30

Date 객체란? : 현 시점의 년도, 월, 일, 요일, 시간 등을 사용하고자 할 때 이용하는 내장객체

> 사용방법 : let 변수지정 = new Date( );

 

*객체에는 프로포타입 과 인스턴스 라는 것이 있는데,

  • 자주 사용하는 기능을 하나의 객체로 만든 것 : 프로토타입
  • 프로토타입을 사용해 만들어낸 객체 : 인스턴스 

ex) let today = new Date( ); => Date( )객체 = 프로토타입  / today = 인스턴스객체 

 

*또한 자바스크립트에서 시간은 밀리초를 사용함으로 1000밀리초 = 1초가 된다.

60 * 1000 밀리초 = 1분

60 * 60 * 1000 밀리초 = 1시간

24 * 60 * 60 * 1000 밀리초 = 1일

 

* toDateString( ) : date에서 날짜 부분만 표시할 때

* toTimeString( ) : date에서 시간 부분만 표시할 때

 

*유의사항 > 특정 날짜 데이터를 사용하고자 할때 월(month)의 값은 1이 아닌 0부터 시작한다는 것을 기억해두자!

 

 

예제 1

let today = new Date();
let nowMonth = today.getMonth()+1;
let nowDate =  today.getDate();
let nowDay = today.getDay();

document.write("<h1>오늘 날짜 정보</h1>");
document.write("현재 월 : " + nowMonth + "월<br/>");
document.write("현재 일 : " + nowDate + "일<br/>");

let classOpen = new Date("2023-02-28");
let theMonth = classOpen.getMonth()+1;
let theDate = classOpen.getDate();

document.write("<h1>개강일 날짜 정보</h1>");
document.write("개강 월 : " + theMonth + "월<br/>");
document.write("개강 일 : " + theDate + "일<br/>");

 

 

예제 2

let today = new Date();
let nowYear = today.getFullYear();

let theDate = new Date(nowYear, 11, 31);
let difDate = theDate.getTime() - today.getTime();

let result = Math.ceil(difDate / (24 * 60 * 60 * 1000));
document.write("연말 D-day : " + result + "일 남았습니다")

 

 

예제 3

HTML body영역

<body>
  <div class="container">
    <div class="day1">
      <h3>우리 만난지</h3>
      <p id="accent" class="accent">
        <span></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">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>
</body>

 

CSS

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
li {
  list-style: none;
}
.container {
  border: 1px solid #ccc;
  border-radius: 2%;
  width: 450px;
  margin: 100px auto;
  box-shadow: 2px 2px 5px #333;

  
}

.day1 {
  padding-top: 20px;
  text-align: center;
}
.day1 h3 {
  color: #666;
  font-size: 1em;
}
.day1 span {
  /* font-size: 1em; */
  font-style: italic;
}
.accent {
  margin-left: 10px;
  margin-right: 10px;
  margin-top: 10px;
  font-weight: bold;
  font-size: 2.3em;
}
.bar {
  width: 100%;
  margin: 60px auto 0 auto;
  padding-left: 15px;
  height: 40px;
  line-height: 40px;
  background-color: #747474;
  color: #fff;
  font-size: 1.2em;
}
.day2 {
  width: 420px;
  /* border: 2px solid red; */
  margin: 20px auto;
}
.day2 ul {
  border-bottom: 1px dashed #ccc;
  height: 60px;
  
}
.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: 100px;
  line-height: 60px;
  text-align: right;
  font-size: 1.2em;
  color: #222;
}

Javascript

let now = new Date();
let firstDay = new Date("2023-02-28");

let toNow = now.getTime();
let toFisrt = firstDay.getTime();
let passedTime = toNow - toFisrt
let passedDay = Math.round(passedTime / (24 * 60 * 60 * 1000));

document.querySelector("#accent span").innerText = passedDay + "일";


function calcDate(e) {
  let future = toFisrt + e * (24 * 60 * 60 * 1000);
  let someDay = new Date(future);
  let year = someDay.getFullYear();
  let month = someDay.getMonth() + 1;
  let date = someDay.getDate();

  document.querySelector("#date" + e).innerText = year + "년" + month + "월" + date + "일";
}
calcDate(100);
calcDate(200);
calcDate(365);
calcDate(500);