Jquery[제이쿼리] setInterval+empty+append로 실시간 세일 시간보기

안녕하세요~ 제이쿼리공장장 주니주니 입니다.

오늘은 제이쿼리[jquery] setInterval+empty+append로 실시간 세일 시간보기를 만들어보겠습니다.

이렇게 틀을 만들어보았습니다.

실행화면입니다.
그럼 시작해볼까요~

===============================
var presale= 86400; 
var hour = presale/3600;
var minute = (presale/60)%60;
var second = presale % 60;
$('h1').append(parseInt(hour)+"시 "+parseInt(minute)+"분 "+parseInt(second)+"초"); 
===============================
변수 presale에는 세일시간 값을 지정해보았습니다 86400는 24시간입니다.! 
변수 presale에 대한 hour/minute/second (시/분/초) 값을 저장하였습니다.
 <h1>태그에다가 append()메서드를 이용하여 값을 찍어주었습니다.
append()메서드는 자주보여서 아시죠? ㅎㅎ
※모르시는 분들은 글찾아보세요!!

실행을 하니!!
이렇게 24시 0분 0초라고 뜨게된답니다.!

===============================
setInterval(function(){
   presale--;  
   hour = presale/3600;
   minute = (presale/60)%60;
   second = presale % 60;
   $('h1').empty();
   $('h1').append(parseInt(hour)+"시 "+parseInt(minute)+"분 "+parseInt(second)+"초"); 
 if(presale == 0){alert("세일 시간끝~"); }  
  },1000);  
===============================
※setInterval()메서드는 일정시간 마다 함수가 실행되도록 하는 메서드입니다.
저는 1초마다 실행하도록 하였습니다.
1초마다 실행이 되면서 presale-- <== 이렇게 presale값을 -1 하였습니다.
그리고 그뒤 시/분/초의 값을 구한뒤  <h1>태그에다가 값을 찍어주도록 하였습니다.
if로 presale값이 0이뜨면 세일 시간 끝~ 이라는 경고창이 뜨도록하였습니다.

실행하면 24시 0분 0초 이지만 !!

1초마다 이렇게 초가 감소된답니다.!

그리고 presale값이 0이 되면! 이렇게 세일 시간 끝이라는 경고창이뜬답니다.
하지만....

이렇게 presale값이 0이 되면서 경고창이뜨지만 그뒤로 계속 마이너스값으로 변한답니다.

그래서 이렇게 수정하였답니다.!
===============================
var ID_presale = setInterval(function(){
===============================
setInterval메서드를 ID_presale라는 이름을 주었다고 생각하시면됩니다.

그리고! presale값이 0이될때!
<h1>태그의 값을 "세일 끝난상품"으로 바꾸고
clearInterval메서드를 이용하여 ID_presale작업을 중단하도록 하였습니다.
※clearInterval()란  setInterval()로 설정한 작업을 취소하는 메서드입니다. () 안에다가 
취소할 아이디값을 주면된답니다.!

그럼실행을 해볼까요?

이렇게 presale값이 0이될때 "세일 끝난상품"으로 변경된모습입니다.
그리고 더이상 실행은 안한답니다.!

오늘은 제이쿼리[jquery] setInterval+empty+append로 실시간 세일 시간보기를 만들어보았습니다.
그럼 다음에 또만나요~