Counter

자동으로 Counter를 세어줍니다. 특정 시작하는 날짜기준으로 몇일이 지난는지, 혹은 끝나는 날짜를 기준으로 몇일이 남았는지 확인할수 기능 입니다.

Daycounter라는 인스턴스에 기준이 될 날짜를 설정하시고, 하단에 있는 statdayD, enddayD ... 등등의 메소드를 호출하세요. 브라우저 리프레쉬 할때마다 값은 변합니다. requestAnimationFrame를 사용하면 리프레쉬 하지 않고도 갱신되는 값을 확인 할수 있습니다. (setInterval 함수로도 구현이 가능하나, requestAnimationFrame함수를 사용하면 더 좋은 결과를 얻을수 있습니다.) Counter객체를 활용해서 특정 이벤트날만 행사하는 카운터를 쉽게 제작할수 있습니다.

HTML

<div class="main">
  <div class="container">
    <!-- 만난지 며칠 -->
    <h2>만난지 <span id="day-count">00</span>일째 지남</h2>
    <h2>만난지 <span id="day-count2">00</span>일째 남음</h2>
  </div>
</div>

JS

 <script>
    $(document).ready(function(){
      const count = new tr.Daycounter({
          startdate: '2021-04-25T24:00:00', // 사작하고자 하는 날짜 및 시간(필수 입력값)
      });
      
      const timeId1 = function() {
        $('#day-count').html(`${count.statDayD()}일, ${count.startDayH()}시간, ${count.startDayM()}분, ${count.startDayS()}초`)
        requestAnimationFrame(timeId1);
      };
      
      timeId1();

      const count2 = new tr.Daycounter({
          enddate : '2021-04-30T24:00:00' // 끝나고자 하는 날짜 및 시간(필수 입력값)
      });

      const timeId2 = function() {
        if(count2.endDayM() < 0 && count2.endDayS() < 0){  //이렇게 조건을 사용해서 현재 시간이 지나면 시간을 멈출수 있습니다.
          return false
        }
        $('#day-count2').html(`${count2.endDayD()}일, ${count2.endDayH()}시간, ${count2.endDayM()}분, ${count2.endDayS()}초`)  
        requestAnimationFrame(timeId2);
      };
      
      timeId2();
    });
</script>

count.statdayD()    startdate Property 값 기준으로 몇일 지났는지 알려주는 메소드.
count.startdayH()   startdate Property 값 기준으로 몇시간 지났는지 알려주는 메소드.
count.startDayM()   startdate Property 값 기준으로 몇분 지났는지 알려주는 메소드.
count.startDayS()   startdate Property 값 기준으로 몇초 지났는지 알려주는 메소드.

count2.enddayD()     enddate Property 값 기준으로 몇일 남았는지 알려주는 메소드.
count2.enddayH()     enddate Property 값 기준으로 몇시간 남았는지 알려주는 메소드.
count2.endDayM()     enddate Property 값 기준으로 몇분 남았는지 알려주는 메소드.
count2.endDayS()     enddate Property 값 기준으로 몇초 남았는지 알려주는 메소드.

👉🏻예시확인

stackblitz 사이트 확인