메뉴 건너뛰기

2016.12.22 20:28

시간 카운트

조회 수 7193 추천 수 0 댓글 0
?

단축키

Prev이전 문서

Next다음 문서

크게 작게 위로 아래로 댓글로 가기 인쇄
?

단축키

Prev이전 문서

Next다음 문서

크게 작게 위로 아래로 댓글로 가기 인쇄
<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>

  1. No Image 22Dec
    by
    2016/12/22 Views 7834 

    하단 고정 레이어 스타일(CSS) 따라하기

  2. No Image 22Dec
    by
    2016/12/22 Views 6968 

    항상 레이어가 정 가운데 위치하는 스크립트

  3. No Image 22Dec
    by
    2016/12/22 Views 6563 

    scrolling to top

  4. Ajax를 이용한 데이터 조회시 로딩 로딩 이미지 보이기(jquery이용)

  5. No Image 22Dec
    by
    2016/12/22 Views 6284 

    금액단위 제거 표기

  6. No Image 22Dec
    by 조쉬
    2016/12/22 Views 7193 

    시간 카운트

  7. No Image 22Dec
    by
    2016/12/22 Views 6432 

    디자인 셀렉트 박스 & CSS

  8. No Image 22Dec
    by
    2016/12/22 Views 8425 

    흐르는 배너 만들기2

  9. No Image 22Dec
    by
    2016/12/22 Views 10379 

    bxslider 멈춤현상

  10. No Image 22Dec
    by
    2016/12/22 Views 49862 

    jquery 플러그인 링크 모음

  11. No Image 18Nov
    by
    2016/11/18 Views 7284 

    html 테이블 고정 (table fixed)

  12. No Image 18Nov
    by
    2016/11/18 Views 7192 

    이미지 클릭 손 (cursor:pointer)

  13. No Image 18Nov
    by
    2016/11/18 Views 7018 

    jQuery Selector (셀렉터)

  14. 날짜 검색 범위 정하기 (jquery)

  15. No Image 17Nov
    by
    2016/11/17 Views 10147 

    jQuery 날짜 비교 (날짜비교)

  16. jQuery 카테고리 선택에 따른 하위 카테고리 변경 (selecbox)

  17. No Image 17Nov
    by
    2016/11/17 Views 10116 

    jquery radio checked (라디오 버튼 값으로 선택), 검색 조건 초기 셋팅

  18. No Image 17Nov
    by
    2016/11/17 Views 6576 

    jquery 뒤로가기

  19. No Image 17Nov
    by
    2016/11/17 Views 8622 

    jQuery tr 추가 (입력창 추가), jQuery 테이블 행 추가/삭제, selector last name

  20. No Image 17Nov
    by
    2016/11/17 Views 7024 

    jQuery, JavaScript 새로고침(reload)

Board Pagination Prev 1 2 3 4 5 6 7 8 9 Next
/ 9

하단 정보를 입력할 수 있습니다

© k2s0o1d4e0s2i1g5n. All Rights Reserved