본문 바로가기

Local Oriented/jQuery

jQuery plug-in, 자동으로 돌아가는 카운터 시계

http://flipclockjs.com/ 자동 시계, 자동 카운터




o java-script


<div id="idCounter"></div>


<script>

  var dEnd = new Date(2017, 9 -1, 29); dEnd.setHours(23, 59, 59); // 2017.09.29 23:59:59. setHours() 하지 않으면 00:00:00 이 됨

  var oldDiff, isStop=false;

  function getDigit(n){ return n>9 ? ''+n : '0'+n; } // 2 자리수로 표시

  function setCounter(){

    var dNow = new Date(); // dNow.setHours(dNow.getHours(),dNow.getMinutes(),dNow.getSeconds());

    if(dEnd>dNow){ // D-day 지나면 카운터 멈춤

      var diff = dEnd.getTime() - dNow.getTime();

      var dds = Math.floor(diff /86400000); diff -= (dds *86400000);  // 1일 = 24 시간 = 24 * 60 * 60 * 1,000

      var hhs = Math.floor(diff /3600000); diff -= (hhs *3600000);  // 1시간 = 60 분 = 60 * 60 * 1,000

      var mms = Math.floor(diff /60000); diff -= (mms *60000);   // 1분 = 60 초 = 60 * 1,000

      var sss = Math.floor(diff /1000);    // 1초 = 1,000 밀리세컨드

      var newDiff = getDigit(dds)+' : '+getDigit(hhs)+' : '+getDigit(mms);

      if(oldDiff!=newDiff){ oldDiff = newDiff; $('#idCounter').text(newDiff); }

    }else{
      isStop = true;

      $('#idCounter').text('00 : 00 : 00');

    }

  }

  

  $(document).ready(function(){ // clearInterval 이 먹혀야 하는데, 안 먹히면 다르게 세팅

    setCounter();

    var timer = setInterval(function(){ if(isStop) clearInterval(timer); else setCounter(); }, 10000); // 10초 마다 리셋, 필요한 만큰 세팅

  });

</script>