Question

我正在尝试使用大约60秒的计时器创建一个网页，如果用户移动鼠标，则会收到一条消息，如果他们等待整整60秒，他们会收到另一条消息。我有这部分工作，您可以从下面创建的代码中看到。

我不能让它工作的部分允许用户再次尝试，所以如果他们移动鼠标，那么他们就有机会尝试让鼠标保持静止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>

Answer 1

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

事实上你想开始倒计时，当倒计时处于活动状态时你想对用户说，嘿等你小山羊，当60秒完成时，另一条消息？对吗？

带有mousemove的jQuery倒计时器

1 个答案: