4.5 警告！你的手机遭到入侵_构建跨平台APP：jQuery Mobile移动应用实战（第2版）（跨平台移动开发丛书）-QQ阅读男生历史网

书名：构建跨平台APP：jQuery Mobile移动应用实战（第2版）（跨平台移动开发丛书）
作者名：李柯泉
本章字数：429字
更新时间：2024-10-30 00:11:26

4.5 警告！你的手机遭到入侵

刚刚完成了上一节的实例，本节中再介绍一种在APP中整蛊的玩法，不过这一次我们要扮演的角色是黑客。

【范例4-9 你的手机已被入侵】

        01    <! DOCTYPE html>
        02
        03    <head>
        04    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        05    <meta name="viewport" content="width=device-width, initial-scale=1">
        06   <title>遭到入侵的手机 </title>
        07    <link rel="stylesheet" href="jquery.mobile.min.css" />
        08    <script src="jquery-2.1.4.min.js"></script>
        09    <script src="jquery.mobile.min.js"></script>
        10    <! --<script type="text/javascript" src="cordova.js"></script>-->
        11    <script type="text/javascript">
        12    $(document).ready(function(){
        13        alert("警告！你的手机已被入侵");
        14        setInterval(function(){     //使用计时器
        15             alert("警告！你的手机已被入侵");
        16        },3000); //设置间隔为3秒，注意这里不要把间隔设得太短，否则在PC上测试时无法关闭浏览器
        17         });
        18    </script>
        19    </head>
        20    <body>
        21         <div data-role="page" data-theme="a">
        22             <! --这里面可以再加一点内容，比如说：hello world-->
        23        </div>
        24    </body>
        25    </html>

运行效果如图4-10所示。

图4-10 运行效果

其中的setInterval()计时器在本章4.2节已经介绍过，而alert()也同样使用过，这里单独把它拿出来是因为笔者认为这样的对话框在今后的实际开发中非常重要。

请读者掏出自己的手机，以最快的速度登录手机QQ然后退出，这时是不是会弹出一个对话框确认是不是真的要退出呢？仔细观察这个对话框与上一节中介绍过的dialog控件有何不同。

没错！这个对话框弹出后，页面仍然保持在当前页面而没有发生跳转，这在应用中进行确认操作时非常实用。

最后希望读者在完成本节的学习之后，能够在自己的手机中找一找这两种对话框的例子，从而加深理解。