🍦Vanilla JS ⑤ 객체 - (2).3 표준 내장 객체 : Date, D-DAY 프로그램

kongmi 2023. 3. 29. 14:35

날짜와 시간을 다루는 Date 객체

const date = new Date();
console.log(date);

Date 객체는 운영체제에서 날짜와 시간 정보를 가져옵니다.

시간 직접 세팅하는 법

인스턴스 만들기

월(月)은 0부터 시작, GMT 기준 시간으로 설정 됨.

const date1 = new Date(2022, 11, 27, 18, 30, 50);
console.log(date1);
// 원하는 달로 입력 됨
const date2 = new Date("2022-12-25/18:30:50");
console.log(date2);

Date 객체 메소드

let myDate = new Date();
console.log(myDate.getFullYear()); // 2023 (현재 연도 출력)
console.log(myDate.getMonth()+1); // 3 (월(月)은 0부터 시작하기 때문에 1 추가)
console.log(myDate.getDate()); // 29
console.log(myDate.getDay()); // 3 (현재 요일 출력 - 월요일(1)부터 시작)
console.log(myDate.getHours()); // 현재 시간 출력
console.log(myDate.getMinutes()); // 분 출력
console.log(myDate.getSeconds()); // 초 출력
console.log(myDate.getTime()); // 1970.01.01 00:00 부터 지금까지 경과 시간(밀리초) 반환

D-DAY 계산 프로그램

지금 다니고 있는 학원 수료 날짜까지 몇 일 남았는지 계산하는 프로그램을 만들었습니다. (2023-07-25)
9n년생들이라면 친숙하실 추억의 아구몬을 배경으로 두었어요 (ㅋㅋㅋ)
원래는 오늘 날짜로만 딱 박아서 만들었었는데, 너무 유연성이 없는 듯 해서 직접 사용자가 날짜를 입력할 수 있게 수정하였습니다.

HTML

<!DOCTYPE html>
<html lang="en">
<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>Document</title>
  <style>
    * {
      box-sizing: border-box;
      margin: 0;
    }
    h1 {
      text-align: center;
      padding: 20px;
    }
    #box {
      width: 400px;
      height: 400px;
      position: relative;
      margin: 0 auto;
      border-radius: 80px;
      border: 1px solid #B0A8B9;
    }
    #box::before {
      content: "";
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      opacity: 0.5;
      background-size:cover;
      background-repeat: no-repeat;
      background-image: url("./230329_1_1_아구몬.png");
    }
    #box #value {
      text-align: center;
      font-size: 4rem;
      font-weight: bold;
      top: 150px;
      left: 10px;
      position: relative;
    }
    #value:hover {
      transform: scale(2,2);
      color: #C34A36;
    }
    .input {
      text-align: center;
      padding: 10px 0 40px 0;
    }
  </style>
</head>
<body>
  <h1>학원 수료 D-DAY</h1>
  <div class="input">
    <label for="text">기준 날짜 (년-월-일) </label>
    <input type="text" id="date">
  <button onclick="dDayCalculate()">계산하기!</button>
  </div>
  <div id="box">
    <p id="value"></p>
  </div>
  <script src="./230329_1_2_디데이계산.js"></script>
</body>
</html>

JavaScript

function dDayCalculate() {
  const date = document.getElementById("date").value;
  const date1 = new Date(date);
  const endDate = new Date("2023-07-25");

  endDateReal = endDate.getTime();
  date1Real = date1.getTime();
  const dDay = endDateReal - date1Real;
  const dDayReal = Math.floor(dDay/(1000*60*60*24));
  document.getElementById("value").innerHTML = `${dDayReal}일`;
}

화면구현

저작자표시 비영리 변경금지 (새창열림)