笔者当年还是一枚小白的时候，经常被QQ控件或各种论坛上的某个比较吸引人的标题所吸引，点开之后却发现网页中弹出了一个对话框，必须要不断地点击烦人的按钮无数次才能关闭这个页面。当时也曾经在网上搜索过相应的教程可惜一直都没有成功。时隔多年，笔者又想起了当年的“悲惨经历”，于是决定在这里与读者分享这样一个例子。
在Dreamweaver中编辑4个文件，分别为index.html、question.html、confirm.html、result,html。下面给出具体代码：
【范例4-5 游戏的开始页面index.html】
点击(此处)折叠或打开
- 01 <!DOCTYPE>
- 02 <html xmlns=\"http://www.w3.org/1999/xhtml\">
- 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-1.0.min.css\" />
- 08 <script src=\"jquery-1.7.1.min.js\"></script>
- 09 <script src=\"jquery.mobile-1.1.1.min.js\"></script>
- 10 <!--<script type=\"text/javascript\" src=\"cordova.js\"></script>-->
- 11 </head>
- 12 <body>
- 13 <div data-role=\"page\">
- 14 <a href=\"question.html\" data-role=\"button\" data-rel=\"dialog\">开始游戏</a>
- 15 </div>
- 16 </body>
- 17 </html>
【范例4-6 询问读者是否是弱智的页面question.html】
点击(此处)折叠或打开
- 01 <!DOCTYPE>
- 02 <html xmlns=\"http://www.w3.org/1999/xhtml\">
- 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-1.0.min.css\" />
- 08 <script src=\"jquery-1.7.1.min.js\"></script>
- 09 <script src=\"jquery.mobile-1.1.1.min.js\"></script>
- 10 <!--<script type=\"text/javascript\" src=\"cordova.js\"></script>-->
- 11 </head>
- 12 <body>
- 13 <div data-role=\"page\">
- 14 <h1>老实交代！你到底是不是弱智！</h1>
- 15 <a href=\"result.html\" data-role=\"button\">这你都知道！！！！</a> //跳至最终页面
- 16 <a href=\"confirm.html\" data-role=\"button\" data-rel=\"dialog\">死不承认！</a> //继续循环
- 17 </div>
- 18 </body>
- 19 </html>
【范例4-7 另一个询问页面confirm.html】
点击(此处)折叠或打开
- 01 <!DOCTYPE>
- 02 <html xmlns=\"http://www.w3.org/1999/xhtml\">
- 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-1.0.min.css\" />
- 08 <script src=\"jquery-1.7.1.min.js\"></script>
- 09 <script src=\"jquery.mobile-1.1.1.min.js\"></script>
- 10 <!--<script type=\"text/javascript\" src=\"cordova.js\"></script>-->
- 11 </head>
- 12 <body>
- 13 <div data-role=\"page\">
- 14 <h1>老实交代！你到底是不是弱智！</h1>
- 15 <a href=\"result.html\" data-role=\"button\">我承认，我是</a> <!--跳至最终页面-->
- 16 <a href=\"question.html\" data-role=\"button\" data-rel=\"dialog\">我不是！</a><!--继续循环-->
- 17 </div>
- 18 </body>
- 19 </html>
点击(此处)折叠或打开
- 01 <!DOCTYPE>
- 02 <html xmlns=\"http://www.w3.org/1999/xhtml\">
- 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-1.0.min.css\" />
- 08 <script src=\"jquery-1.7.1.min.js\"></script>
- 09 <script src=\"jquery.mobile-1.1.1.min.js\"></script>
- 10 <!--<script type=\"text/javascript\" src=\"cordova.js\"></script>-->
- 11 </head>
- 12 <body>
- 13 <div data-role=\"page\">
- 14 <h1>早点承认不就好了么，何必这么麻烦！</h1>
- 15 </div>
- 16 </body>
- 17 </html>
运行后如图4-6、4-7、4-8和4-9所示。
首先单击“开始游戏”按钮，就会看到页面中有文字询问用户是否承认自己是弱智，若是愿意承认自己是弱智，则可以转到图4-9所示页面，游戏结束，否则便要一直重复下去。
4-6 4-7 4-8 4-9
别再犹豫了，想学习更多的APP小游戏，想学习最简单的手游开发，多做这本书《构建跨平台APP：jQuery Mobile移动应用实战》的例子就好了。
来自 “ ITPUB博客 ” ，链接：http://blog.itpub.net/9848525/viewspace-1224677/，如需转载，请注明出处，否则将追究法律责任。
转载于:http://blog.itpub.net/9848525/viewspace-1224677/
2369
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
