Question

当鼠标指针远离浏览器页面的内容时，我编写了一个以下脚本来显示警告消息。

<!DOCTYPE html>
<html>
  <head>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js">
    </script>
    <script>
    $(document).ready(function(){
      $(document).mouseleave(function() { 
        alert("your mouse is away"); 
      });
    });
    </script>
  </head>
  <body>

  <h1>My first PHP program</h1>
  <p>Hello World!</p>

  </body>
</html>

现在我想要实现的是当显示来自上面脚本的警报消息时，应该启动计时器。当五秒钟的时间过去时，如果用户没有点击显示的警告框的“确定”按钮，则会在此警报消息上显示另一个警告框，上面写着“您的时间已经完成”。但是当显示第一个警告框时，计时器启动并且用户在完成五秒钟之前单击“确定”按钮，然后第二个警告框不应显示，并且计时器应再次初始化为零秒。请问有人可以在这方面帮助我吗？任何形式的帮助或建议都将受到高度赞赏和接受。等待你的回复。感谢您花费一些宝贵的时间来理解我的问题。

Answer 1

试试这段代码，

<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js">   </script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css">
</script>
<script>
    var timer;
    $(document).ready(function () {
        $(document).mouseleave(function () {
            customAlert("your mouse is away");

        });
    });

    function customAlert(customText) {
        $("#popUp").html(customText);
        timer = setInterval(customAlert2, 5000)

        $("#popUp").dialog({
            dialogClass: "no-close",
            buttons: [{
                text: "OK", click: function () {
                    $(this).dialog("close");
                    clearInterval(timer);
                }
            }]

        });

    }

    function customAlert2() {
        $("#popUp2").dialog({
            dialogClass: "no-close",
            buttons: [{
                text: "OK", click: function () {
                    $(this).dialog("close");
                }
            }]

        });

    }


 </script>
 </head>
 <body>

<h1>My first PHP program</h1>
<p>Hello World!</p>
<div id="popUp"></div>
<div id="popUp2">your time is over</div>

 </body>
</html>

如何设置计时器以显示警报消息并将该警报消息与另一个警报消息重叠？

1 个答案: