0

約 60 秒のタイマーを使用して Web ページを作成しようとしています。ユーザーがマウスを動かすと 1 つのメッセージが表示され、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>
4

1 に答える 1

0

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

実際、カウントダウンを開始したいのですが、カウントダウンがアクティブになっているときに、ユーザーに言いたいことがあります。右 ？

于 2013-03-14T14:09:47.310 に答える