타이머 만들기

Javascript/jQuery 2013.03.12 16:30

시분초를 계산하는 타이머를 만들어보았다. 처음에 다른 사람이 짠 소스를 봤으나 왠지 마음에 들지않아 새로 만들었다. 하지만 내가 만들어도 맘에들지 않는구나... 좀더 쉽게 심플하게 만들고 싶으나 다음에 도전해보자.

<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.03.12
달력 만들기  (0) 2013.01.17
단축키를 눌러 특정위치로 이동  (0) 2012.11.22
레이어를 화면 중앙에 띄우기  (0) 2012.11.08
Trackbacks 0 : Comments 0

Write a comment