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