[2015.11.12] 타이머 디자인

스샷으로 보면 뭔가 싶긴 하네요...ㅋ

세로로 길게 하고 스샷을떴더니만..^^; 

디자인은 아래 embed 된 코드펜에서 확인해보시기 바랍니다.

 

  

 

 

 

javascript를 보면 setInterval과 setTimeout 을 사용해서 심플하게 구현해 놨군요.

button = $('.card__button');

button.on('click', function clicked() {
    $(this).addClass('card__button--triggered');

    $(this).off('click', clicked);

var count=30;
var counter=setInterval(timer, 100);

function timer()
{
  count -= 1;
  if (count === -1)
  {
      clearInterval(counter);

        setTimeout(function(){
            count = 30;
            document.getElementById("num").innerHTML=count;

            button.removeClass('card__button--triggered');
            button.on('click', clicked);

        }, 800);

     return;
  }
 document.getElementById("num").innerHTML=count;
}

});

 

 

 

 

 

 

 

간단한 사용 예제 및 Demo

See the Pen Countdown Timer based on https://dribbble.com/shots/2343572-Countdown-timer by Andreas Neeven (@aneeven) on CodePen.