2012-05-19 2 views
4

내 페이지에 jquery 타이머가 10에서 0으로 카운트 다운됩니다. 5 초에서 경고 메시지를 표시하고 0 초에 다른 메시지를 표시하려고합니다.간격 경보가있는 타이머

내가 양식 필드에 카운트 다운을 할뿐만 아니라 경고를 줄 것이다 아래의 코드를 사용했다, 그러나 카운트 다운이 경고를 표시 할 때 중지 :

$(function(){ 
    var count = 10; 
    countdown = setInterval(function(){ 
     $("#Exam_Timer").val(count + " seconds remaining!"); 
     if (count == 5) { 
      alert('Only 5 Seconds Left'); 
     } 
     if (count == 0) { 
      alert('Times Up') 
     } 
    count--; 
    }, 1000); 
}); 

누군가가 알려 수 어떻게 경고가 카운트 다운을 멈추지 않도록이 구조를 재구성하겠습니까?

경고를 별도의 기능에 넣으려고했으나 도움이되지 않았습니다. 이 scripts 실행을 중지로

http://jsfiddle.net/CQu7T/

+0

JavaScript 경고는 모달입니다. 그들은 브라우저 컨트롤과 실행중인 스크립트를 차단합니다. 자체 구현 된 메시지 블록을 사용하십시오. – VisioN

+0

@jdublu 'count === 0';이 (가)있을 때 clearInterval이 누락되었습니다.) – Andreas

답변

7

당신은 alert이 작업을 수행하지 못할 : 나는 바이올린을 만들었습니다. 그러나 jQuery UI 대화 상자를 사용하여이 작업을 수행 할 수 있습니다.

Working Demo

1

경고 본질 휴식 기본 브라우저 설정 (컨트롤 및 스크립트)에 그들이 표시됩니다 이상한 것들 다음 데모를 확인하십시오. 당신이 html

$(function(){ 
    var count = 10; 
    countdown = setInterval(function(){ 
     $("#Exam_Timer").val(count + " seconds remaining!"); 
     if (count == 5) { 
      $("#message").html('Only 5 Seconds Left'); 
     } 

     if (count == 0) { 
      $("#message").html('Times Up') 
     } 
     count--; 
    }, 1000); 
}); 

jsfiddle를 참조 jQuery로 다른 요소에 경고 메시지를 배치합니다 수행 할 수있는

. 이 요소를 CSS로 스타일링하여 모달 창처럼 보이게 할 수 있습니다.