티스토리 뷰

프로그래밍

[JAVASCRIPT] jQuery - 입력 받은 숫자를 시,분, 초로 나타내며 카운트다운 하기 예제

ReturnToHome 2016. 12. 24. 21:42

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 ​Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">​
<html>
<head>
<meta charset="utf-8" />
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/jquery-migrate-1.1.0.js"></script>
<script src="http://code.jquery.com/ui/1.11.2/jquery-ui.js"></script>

<script type="text/javascript">

 var min = 0;
 var sec = 0;
 var time = 0;
 var runCount;

 // 시작 함수 호출 시
 function fncCountDown() {

  console.log("start!!");

  // 입력 값 셋팅
  time = $("#time").val();

  if ( time.length > 0 ) {
   runCount = setInterval("startCountDown()", 1000);

  } else {
   alert("값을 입력 해 주세요");
   return;

  }
 }

 // 카운트 다운 및 노출하기
 function startCountDown() {

  // hour = parseInt(time/3600);
  min = parseInt((time%3600)/60);
  sec = time%60;

  $("#countTime").val(min + " : " + sec);

  // 시간이 다 됐을 시 timer 정지
  if ( parseInt(time) == 0 ) {
   stopCountDown();

  } else {
   time--;
  }

 }

 // 타이머 정지
 function stopCountDown() {
  console.log("clearInterval");
  clearInterval(runCount);
 }
 
</script>

</head>
<body>

 <table border="1">
  <tr>
   <td><input type="text" id="time" value="20" /></td>
   <td><input type="button" value="시작" onclick="fncCountDown()"></td>
   <td><input type="text" id="countTime" readOnly /></td>
  <tr>
 </table>
</body>

</html>

저작자표시

'프로그래밍' 카테고리의 다른 글

[ETC] UNIX 명령어, MSSQL 명령어  (0) 2016.12.24
[ETC] FORMATTER 링크 모음  (0) 2016.12.24
[JAVASCRIPT] javascript 로드하기  (0) 2016.12.24
[JAVASCRIPT] 정렬 예제  (0) 2016.12.24
[JAVASCRIPT] slice, join  (0) 2016.12.24
댓글
공지사항
최근에 올라온 글
최근에 달린 댓글
Total
Today
Yesterday
링크
TAG more
«   2024/05   »
일 월 화 수 목 금 토
1 2 3 4
5 6 7 8 9 10 11
12 13 14 15 16 17 18
19 20 21 22 23 24 25
26 27 28 29 30 31
글 보관함