笔者当年还是一枚小白的时候,经常被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/