[자바스크립트] 날짜계산기 만들기

 

HTML

<!--기념일계산-->
    <div class="js-dday">
        <h1>기념일 계산기</h1>
        <h3>우리 만난지</h3>
        <p id="accent">일</p>
        <input id="input_date" type="date">
        <input id="input_submit" type="submit" onclick="input()" value="확인">
    </div>

 

자바스크립트

const now = new Date();

function input(){
    const dday = new Date(document.querySelector("#input_date").value);
    const passedTime = now.getTime()-dday.getTime();
    const passedDay = Math.round(passedTime/(24*60*60*1000));
    document.querySelector("#accent").innerHTML = passedDay+"일";
}

 

 

const now = new Date()는 Wed Dec 16 2020 09:00:00 GMT+0900 (대한민국 표준시) 이런식으로 저장되고 

바로 밀리초로 바꿀 수 있는 getTime() 함수 사용 가능

 

 

 

input type="date"로 사용하면 2021-01-06 이런식으로 저장되어 getTime()함수 바로 사용 불가

때문에 얘도 위처럼 대한민국 표준시 형식으로 바꿔주어야함

→ const dday = new Date(document.querySelector("#input_date").value);

 

 

 

원래는 document.querySelector("#input_date").value를 변수에 저장한 후에

다시 변수를 만들어서 new Date()안에 넣어봤는데 에러남..

왜 그런건지 잘 모르겠으나 일단 해결했으니 넘어가기로...ㅎ

 

 

결과