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

回答

相关问题