본문 바로가기

Javascript/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 = 1;

var minute = 0;

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 < 0){

minute--;

second = 59;

}

//시간처리

if(minute < 0){

if(hour > 0){

hour--;

minute = 59;

}

}

}

    }, 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>




시간 카운트 606060

'Javascript > jQuery' 카테고리의 다른 글

input 박스에 숫자만 입력하기  (1) 2016.08.17
jQuery Attributes vs. Properties  (0) 2016.02.15
달력 만들기  (0) 2013.01.17
단축키를 눌러 특정위치로 이동  (0) 2012.11.22
레이어를 화면 중앙에 띄우기  (0) 2012.11.08