jquery倒數計時器與mousemove

我想創建一個約60秒長的計時器的網頁，如果用戶移動鼠標，他們得到一條消息，如果他們等待60秒完整他們得到另一條消息。我有這部分工作，你可以從下面創建的代碼中看到。jquery倒數計時器與mousemove

部分，我不能得到它的工作，讓用戶再次嘗試，所以如果他們移動鼠標，然後他們有機會嘗試讓鼠標停留另外60秒，甚至在他們得到贏得消息，他們可以再次嘗試。

舊代碼 - 該代碼：

<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title>Timer</title> 
<style> 
.start{display:block;} 
.oops{display:none;} 
.end{display:none;} 
.tryagain{ cursor:pointer; color:#0066FF;} 
.startcount{ cursor:pointer; color:#0066FF;} 
</style> 
</head> 

<body> 

<div class="start"> 
<span class="startcount">Start text</span> || Can you wait??? 
<p class="countdown"></p> 
</div> 

<div class="oops"> 
opps you moved the mouse | Would you like to <span class="startcount">try again?</span> 
</div> 

<div class="end"> 
Well done you waited. | Would you like to <span class="startcount">try again?</span> 
</div> 

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> 
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.1/jquery-ui.min.js"></script> 
<script> 
$(function(){ 
    var count = -1; 
     countdown = null; 

    $('.startcount').on('click', function(){ 
     count = 10; 
     $('.start').css({'display':'block'}); 
     $('.end').css({'display':'none'}); 
     $('.oops').css({'display':'none'}); 
     if (countdown == null){ 
     countdown = setInterval(function(){ 
      $("p.countdown").html(count + " seconds remaining!"); 
      if(count > 0){ 
       count--; 
      } 
      if(count == 0){ 
       $('.start').css({'display':'none'}); 
       $('.end').css({'display':'block'}); 
       $('.oops').css({'display':'none'}); 
       clearInterval(countdown); 
       countdown = null; 
      } 
      if(count > 1){ 
       $('html').mousemove(function(){ 
        $('.oops').css({'display':'block'}); 
        $('.start').css({'display':'none'}); 
        $('.end').css({'display':'none'}); 
        clearInterval(countdown); 
        countdown = null; 
       }); 
      }else if(count == 0){ 
       $('html').mousemove(function(){ 
        $('.oops').css({'display':'none'}); 
        $('.end').css({'display':'block'}); 
       }); 
      }else{ 
       $('html').mousemove(function(){ 
        $('.oops').css({'display':'none'}); 
       }); 
      } 
      console.log(count); 
      console.log(countdown); 
     }, 1000); 
     } 
    }); 

}); 
</script> 
</body>

固定碼：

<html> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title>Timer</title> 
<style> 
.start{display:block;} 
.oops{display:none;} 
.end{display:none;} 
.tryagain{ cursor:pointer; color:#0066FF;} 
.startcount{ cursor:pointer; color:#0066FF;} 
</style> 
</head> 

<body> 

<div class="start"> 
<span class="startcount">Start text</span> || Can you wait??? 
<p class="countdown"></p> 
</div> 

<div class="oops"> 
opps you moved the mouse | Would you like to <span class="startcount">try again?</span> 
</div> 

<div class="end"> 
Well done you waited. | Would you like to <span class="startcount">try again?</span> 
</div> 

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> 
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.1/jquery-ui.min.js"></script> 
<script> 
$(function(){ 
    var count = 3, 
    countdown = null, 
    counter; 

    $('.startcount').on('click', function(){ 

     // on click displayes the start information 
     $('.start').css({'display':'block'}); 
     $('.end').css({'display':'none'}); 
     $('.oops').css({'display':'none'}); 

     counter = count; // sets up the counter 
     countdown = setInterval(function(){ 
      $("p.countdown").html(counter + " seconds remaining!"); 

      if(counter != 0){ 
       //checks for mouse movements 
       $('html').mousemove(function(){ 
        $('.oops').css({'display':'block'}); 
        $('.start').css({'display':'none'}); 
        $('.end').css({'display':'none'}); 
        clearInterval(countdown); //clears the interval so that it does not run multiple times 
       }); 
      } else { 
       $('html').unbind('mousemove'); //removes the mousemove bind to the html !this is important 
       $('.start').css({'display':'none'}); 
       $('.end').css({'display':'block'}); 
       $('.oops').css({'display':'none'}); 
       clearInterval(countdown); //clears the interval so that it does not run multiple times 
       return false; 
      } 

      counter--; //removes 1 from the counter 

     }, 1000); 
     $('html').unbind('mousemove'); //removes the mousemove bind to the html !this is important 

    }); 

}); 
</script> 
</body> 
</html>

來源

2013-03-14 Andrew

http://keith-wood.name/countdown.html

其實你wanne開始倒計時，當倒計時激活您想要對使用者說，嘿等你小山羊，等60秒完成後，再說呃訊息？對？

來源

2013-03-14 14:09:47 user666

他們點擊startcount範圍來統計工作的計數器，當它達到零時，文本更改也起作用。我正在清除該階段的setInterval。當用戶再次點擊startcount時，它不會再次運行setInterval – Andrew 2013-03-14 14:19:04

您有一個示例頁面，我可以嘗試一些事情嗎？ – user666 2013-03-14 14:27:45

沒有示例頁面，但是如果您在桌面上複製並粘貼代碼，請確保您的頂部有，並在底部關閉。您應該能夠看到演示正在運行。 – Andrew 2013-03-14 14:30:05

jquery倒數計時器與mousemove

回答

相關問題