[Javascript] 동적 날짜 생성 new Date();

erinngo·2023년 8월 1일
0
post-thumbnail
<div class="now">
  <div class="date"></div>
  <div>
    <span class="month"></span>
    <span class="year"></span>
  </div>
  <div class="day"></div>
</div>

✏️   new Date(); 객체 및 메소드 활용 방법


메소드반환값
연도getFullYear();  
getMonth() + 1;  반환값: 0~11, 정확한 값을 위해 " 반환값 + 1 "
반환값을 문자열로 변환하여 활용 가능
날짜getDate();  
요일getDay();  반환값이 0~6, 일요일~토요일의 순서
반환값을 문자열로 변환하여 활용 가능

function getDate() {
    const Now = document.querySelector(".now");
    const DDate = document.querySelector(".date");
    const Month = document.querySelector(".month");
    const Year = document.querySelector(".year");
    const Day = document.querySelector(".day");

    let now = new Date();
    let year = now.getFullYear();
    let date = now.getDate();
    //*** getMonth() + 1
    let monthNum = now.getMonth() + 1;
    let monthStr = ["", "JAN", "FEB", "MAR", "APR", "MAY", "JUN", "JUL", "AUG", "SEP", "OCT", "NOV", "DEC"];
    let month = monthStr[monthNum];
    let dayNum = now.getDay();
    let dayStr = ["SUNDAY", "MONDAY", "TUESDAY", "WEDNESDAY", "THURSDAY", "FRIDAY", "SATURDAY"];
    let day = dayStr[dayNum];

    DDate.textContent = date;
    Month.textContent = month;
    Year.textContent = year;
    Day.textContent = day;
}

0개의 댓글