반응형
Notice
Recent Posts
«   2024/12   »
일 월 화 수 목 금 토
1 2 3 4 5 6 7
8 9 10 11 12 13 14
15 16 17 18 19 20 21
22 23 24 25 26 27 28
29 30 31
Today
Total
관리 메뉴

오식랜드

[javascript] D-Day 계산기 만들기 본문

dev-log/html·css·js

[javascript] D-Day 계산기 만들기

개발하는 오식이 2021. 5. 28. 17:26
반응형

디데이 계산기 만들기 코드

dday 변수에 원하는 (월, 일, 년도, 시간)을 넣어주면 그날까지 남은 일수를 구해준다.

<body>  
    <div class="counter"></div>
    
    <script>
        let counter = document.querySelector('.counter');
        let today = new Date(), //현재 날짜 가져오기
            dday = new Date("Dec 12,2021, 00:00:00").getTime(), //디데이
            gap = dday - today,
            result = Math.floor(gap / (1000 * 60 * 60 * 24));
        
        counter.innerHTML = `D-${result}`
    </script>
</body>

글 작성일(2021/05/28)로부터 2021년 12월 31일까지 남은 일수를 보면

217일 남았다고 한다

 

반대로 얼마나 지났는지 궁금하다면 gap에서 계산되는 두 변수의 위치를 바꿔주면 된다!

2021년 1월 1일부터 오늘까지 며칠이 지났나 계산해보면

<script>
  let counter = document.querySelector('.counter');
  let today = new Date(), //현재 날짜 가져오기
      dday = new Date("Jan 1,2021, 00:00:00").getTime(), //디데이
      gap = today - dday,
      result = Math.floor(gap / (1000 * 60 * 60 * 24));

  counter.innerHTML = `D+${result}`
</script>

147일이 지났다고 한다 :)

 

*참고로 new Date()에서 월 입력 방식은 영어로 된 월별 이름에서 앞에서 3글자를 입력하면 된다!

Jan, Feb, Mar, Apr, May, Jun, Jul, Agu, Sep, Oct, Nob, Dec

반응형
저작자표시

'dev-log > html·css·js' 카테고리의 다른 글

[css motion] hover시 border 그어지는 모션  (0) 2021.06.14
[javascript] new Date()를 이용해 현재 날짜, 시간 불러오기  (0) 2021.05.28
[css motion] button hover effect  (0) 2021.05.27
[javascript] html 페이지에 bgm 추가하기  (0) 2021.05.21
[javascript] 요소의 순서 구하기  (0) 2021.05.21
'dev-log/html·css·js' Related Articles more
Comments