Published 2022. 7. 20. 20:08

[JavaScript] Date 객체 이용하여 기념일 계산하기

코드

html, css

<!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>기념일 계산</title>

    <link rel="stylesheet" href="css/기념일계산.css" />
  </head>

  <body>
    <div id="container">
      <div class="day1">
        <h2>예담 다닌지</h2>
        <p id="accent" class="accent">며칠?</p>
        <div class="cnt_bar">
          <div class="cnt"></div>
        </div>
      </div>
      <div class="bar">기념일 계산</div>
      <div class="day2">
        <table>
          <tr>
            <td class="item_title">100일</td>
            <td class="intem_date" id="day100"></td>
          </tr>
          <tr>
            <td class="item_title">200일</td>
            <td class="intem_date" id="day200"></td>
          </tr>
          <tr>
            <td class="item_title">1년</td>
            <td class="intem_date" id="day365"></td>
          </tr>
          <tr>
            <td class="item_title">500일</td>
            <td class="intem_date" id="day500"></td>
          </tr>
        </table>
      </div>
    </div>

    <script>
      let now = new Date();
      // 예담 교육 시작일
      let firstDay = new Date("2022-05-09");
      // 예담 교육 종료일
      let lastDay = new Date("2022-11-07");
      // getTime() 으로 ms 로 변경 --> 시간 계산 가능
      let toNow = now.getTime();
      let toFirst = firstDay.getTime();
      let toLast = lastDay.getTime();
      let meetTime = toNow - toFirst;

      // 만난 시간 퍼센티지 구하기
      let totalMeetTime = toLast - toFirst;
      let meetPercent = (meetTime / totalMeetTime) * 100;
      // 퍼센티지로 디스플레이 바 표시
      let a = document.querySelector(".cnt");
      a.style.width = meetPercent + "%";
      a.innerText = meetPercent.toFixed(2) + "%";

      // 만난 시간 -> 일수로 변환
      // ms / 1000 / 60 / 60 / 24
      //         초   분   시   일
      let meetDay = Math.round(meetTime / 1000 / 60 / 60 / 24);
      document.querySelector("#accent").innerHTML = meetDay + "일";

      // 각 기념일 계산
      calcDate(100);
      calcDate(200);
      calcDate(365);
      calcDate(500);

      function calcDate(days) {
        let futureTime = toFirst + days * 1000 * 60 * 60 * 24;
        // 일, 시간 반환
        let futureDay = new Date(futureTime);
        console.log(futureDay);

        let year = futureDay.getFullYear();
        // getMonth() 는 + 1 해줘야
        let month = futureDay.getMonth() + 1;
        let day = futureDay.getDate();
        document.querySelector(
          "#day" + days
        ).innerText = `${year} 년 ${month} 월 ${day} 일`;
      }
    </script>
  </body>
</html>

css

@font-face {
  font-family: bm;
  src: url(../font/bamin/BMJUA_ttf.ttf);
}

* {
  font-family: bm;
  font-size: 25px;
}

#container {
  margin: 0 auto;
  width: 55%;
  border: 3px dashed black;
  text-align: center;
  box-sizing: border-box;
}

.day1 {
  height: 300px;
}

h2 {
  font-size: 50px;
  font-weight: 600;
}

.day1 p {
  font-size: 30px;
}

.cnt_bar {
  width: 70%;
  height: 40px;
  margin: 0 auto;
  margin-top: 60px;
  background-color: darkblue;
  border-radius: 5px;
}

.cnt {
  height: 40px;
  background-color: #f6f656;
  border-radius: 5px;
  color: darkblue;
  line-height: 40px;
}

/* .cnt:hover {
  background-color: #f6f656;
} */

.bar {
  background-color: black;
  color: white;
  text-align: left;
  padding: 6px;
}

table {
  margin: 10px auto;
  border-collapse: collapse;
  /* background-color: #f6f656; */
  width: 90%;
}

tr:not(:last-child) {
  border-bottom: 1px solid black;
}

td {
  padding: 20px;
  /* border: 1px solid black; */
}

.intem_date {
  font-size: 22px;
}

실행화면

- Just Do It -

저작자표시

'JavaScript' 카테고리의 다른 글

[JavaScript] 다양한 함수 선언 방법 (0)	2022.07.20
[JavaScript] 체크리스트 만들기 (0)	2022.07.20
[JavaScript] setInterval 메서드 이용해 타이머 만들기 (0)	2022.07.20
[JavaScript] 입력 폼에서 조건 체크하기 (0)	2022.07.20
[JavaScript] 배열 (0)	2022.07.20

[JavaScript] Date 객체 이용하여 기념일 계산하기

코드

실행화면

'JavaScript' 카테고리의 다른 글

티스토리툴바