[jQuery] 시간 카운트

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>

<script language="javascript">

$(document).ready(function(){
//초기값
var hour = 12;
var minute = 00;
var second = 2;

// 초기화
$(".countTimeHour").html(hour);
$(".countTimeMinute").html(minute);
$(".countTimeSecond").html(second);

var timer = setInterval(function () {
// 설정
$(".countTimeHour").html(hour);
$(".countTimeMinute").html(minute);
$(".countTimeSecond").html(second);

if(second == 0 && minute == 0 && hour == 0){
alert('타이머 종료.');
clearInterval(timer); /* 타이머 종료 */
}else{
second--;
if(second<10){
$(".countTimeSecond").html('0' + second);
}

// 분처리
if(second == 0){
minute--;
second = 59;
}
if(minute<10){
$(".countTimeMinute").html('0' + minute);
}

//시간처리
if(minute == 0){
if(hour > 0){
hour--;
minute = 59;
}
}
if(hour<10){
$(".countTimeHour").html('0' + hour);
}
}
}, 1000); /* millisecond 단위의 인터벌 */
});

</script>
</head>
<body>
<div>
<strong>시간 카운트</strong>
<span class="countTimeHour">60</span>시
<span class="countTimeMinute">60</span>분
<span class="countTimeSecond">60</span>초
</div>
</body>
</html>

출처 : http://junemoon.tistory.com/107

댓글

  1. 안녕하세요 일단위까지 늘리려면 어디가 어떻게 변해야 될까요?

    답글삭제

댓글 쓰기

이 블로그의 인기 게시물

[iOS] body 스크롤 막기

[html] 모바일웹 작업 팁 정리중...

Swiper lazyLoading