[javascript] 달의 마지막 날 까지 카운트다운

현재 시간에서 현재 달을 구하고

현재 달의 마지막 날을 구해서

현재 달의 마지막 날 까지 카운트 다운을 시켜보자 !

​

https://egmrss.csb.app/

Static Template

 

참고

https://codepen.io/chrisjdesigner/pen/dMbmoE

인데 참고가 아니고 거의 복붙해서 학습하는 수준 ㅎㅋㅋㅋㅋ

​

//html
<div class="top">
    <p>이번 달의 마지막 날은?</p>
    <span></span>
</div>
<h1>count down</h1>
<div id="countdown">
    <ul>
        <li id="days">
            <div class="number"></div>
            <div class="label">days</div>
        </li>
        <li id="hours">
            <div class="number"></div>
            <div class="label">hours</div>
        </li>
        <li id="minutes">
            <div class="number"></div>
            <div class="label">minutes</div>
        </li>
        <li id="seconds">
            <div class="number"></div>
            <div class="label">seconds</div>
        </li>
    </ul>
</div>

//css
* {margin:0; padding:0; box-sizing:border-box;}
.top * {text-align:center;}
.top p {opacity:0.6; font-size:20px; padding-top:30px;}
.top span {display:block; font-size:22px; padding-top:10px;}
h1 {width:100%; text-align:center; font-size:25px; padding:50px 0 30px;}
#countdown {display:flex; justify-content:center; align-items:center; flex-wrap:wrap;}
#countdown * {text-transform:uppercase;}
#countdown li {font-size:6vw; text-align:center; display:inline-block; margin:0 20px;}
.number {font-weight:bold;}
.label {font-size:1.5vw;}

 

js 코드는 이렇다

// js
      var date = new Date(); // 현재 시간 생성
      var lastDay = new Date(date.getFullYear(), date.getMonth() + 1, 0 + 1); // check this month last day
      $('.top span').text(lastDay);

      var targetDate = lastDay;
      var days;
      var hrs;
      var min;
      var sec;

      function timeToLaunch() {
        // Get the current date
        var currentDate = new Date();

        // Find the difference between dates
        var diff = (currentDate - targetDate) / 1000;
        var diff = Math.abs(Math.floor(diff));

        // Check number of days until target
        days = Math.floor(diff / (24 * 60 * 60));
        sec = diff - days * 24 * 60 * 60;

        // Check number of hours until target
        hrs = Math.floor(sec / (60 * 60));
        sec = sec - hrs * 60 * 60;

        // Check number of minutes until target
        min = Math.floor(sec / 60);
        sec = sec - min * 60;
      }

      function countDownTimer() {
        // Figure out the time to launch
        timeToLaunch();

        // Write to countdown component
        $("#days .number").text(days);
        $("#hours .number").text(hrs);
        $("#minutes .number").text(min);
        $("#seconds .number").text(sec);

        // Repeat the check every second
        setTimeout(countDownTimer, 1000);
      }

      function numberTransition(
        id,
        endPoint,
        transitionDuration,
        transitionEase
      ) {
        // Transition numbers from 0 to the final number
        $({ numberCount: $(id).text() }).animate(
          { numberCount: endPoint },
          {
            duration: transitionDuration,
            easing: transitionEase,
            step: function () {
              $(id).text(Math.floor(this.numberCount));
            },
            complete: function () {
              $(id).text(this.numberCount);
            }
          }
        );
      }
      timeToLaunch();
      countDownTimer();

근데 마지막 numberTransition() 함수 이해안된다 ...?

뇌가 이해하기 싫어하는 걸 수도

이해하는날이 올때까지 계속 반복해보기