《构建跨平台APP：jQuery Mobile移动应用实战》连载三（整蛊小游戏）
笔者当年还是一枚小白的时候，经常被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>
【范例4-8 游戏结束页面result.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/
《构建跨平台APP：jQuery Mobile移动应用实战》连载三（整蛊小游戏）相关推荐
- 小白学phoneGap《构建跨平台APP：phoneGap移动应用实战》连载一（PhoneGap中的API）...
之前本博连载过<构建跨平台APP:jQuery Mobile移动应用实战>一书,深受移动开发入门人员的喜爱. 从现在开始,连载它的孪生姐妹书phoneGap移动应用实战一书,希望曾经是小白 ...
- 跨平台APP JQuery Mobile开发-张晨光-专题视频课程
跨平台APP JQuery Mobile开发-1170人已学习 课程介绍 jQuery Mobile 是创建移动 web 应用程序的框架: 适用于所有流行的智能手机和平板电脑,使用 H ...
- 视频教程-跨平台APP JQuery Mobile开发-jQuery
跨平台APP JQuery Mobile开发 主要研究方向为J2EE..net .数据库 .前端.Android,曾经服务过大型上市国企IT部门,软件企业联合创始人,对软件研发管理.市场营销有自己独特 ...
- 小白学phoneGap《构建跨平台APP：phoneGap移动应用实战》连载四（使用程序载入事件）...
在了解了PhoneGap中都有哪些事件之后,本节将開始对这些事件的使用方法进行具体地介绍.本节要介绍的是程序载入事件,也就是deviceready.pause和resume这3个事件. [范例4-2 ...
- 小白学phoneGap《构建跨平台APP：phoneGap移动应用实战》连载三（通过实例来体验生命周期）
4.1.2 通过实例来亲身体验Activity的生命周期 上一小节介绍了Activity生命周期中的各个过程,本小节将以一个简单的实例来使读者亲身体验到Activity生命周期中的各个事件. 在Ec ...
- 小白学jquery Mobile《构建跨平台APP：jQuery Mobile移动应用实战》连载四（场景切换）...
作为一款真正有使用价值的应用,首先应该至少有两个页面,通过页面的切换来实现更多的交互.比如手机人人网,打开以后先是进入登录页面,登录后会有新鲜事,然后拉开左边的面板,能看到相册.悄悄话.应用之类的其他 ...
- 《构建跨平台APP：jQuery Mobile移动应用实战》
http://product.dangdang.com/23472199.html http://item.jd.com/1159658668.html <构建跨平台APP:jQuery Mob ...
- 小白学jquery Mobile《构建跨平台APP：jQuery Mobile移动应用实战》连载结束
感谢各位亲们的大力支持,小白学jquery Mobile<构建跨平台APP:jQuery Mobile移动应用实战>连载已经结束了. 有兴趣的读者能够看我的博客,也能够看以下的链接逐个学习 ...
- 使用 jQuery Mobile 与 HTML5 开发 Web App —— jQuery Mobile 默认配置与事件基础
使用 jQuery Mobile 与 HTML5 开发 Web App -- jQuery Mobile 默认配置与事件基础 时间:2012年9月25日 分类:JavaScript 标签:HTML5‚ ...
最新文章
- MySQL数据库中文模糊检索问题
- 《WebForm开发系列高级篇》Item2导出EXCEL通用类(GridView,DataList,Repeater,DetailView)
- java jsch session 多久会断开_What？纯Java居然能实现Xshell！
- 天时、地利、人和，技术成熟推动闪存联盟2.0落地
- (转)C#读写共享文件
- android和emui的版本对应,同为Android 操作系统的小米MIUI和华为EMUI, 谁更优秀?
- java原始套接字打开_原始套接字-IP头包含选项
- c语言et1tr1怎么用,TMOD=0x11;ET0=1;TR0=0;ET1=1;TR1=0;EA=1;这是什么意思啊？？谢谢啦
- 中职计算机说课稿三篇,中职计算机说课稿三篇.docx
- fastreport打印ftp图片_FastReport快速打印(.net)
- git中rejected的解决方法
- 2019年厦门大学计算机系夏令营经历
- FLV.js播放报错,及浏览器播放flv缓存内存不足导致黑屏
- 学习iPhone UIKit 9
- JAVA的学习（在IDEA环境下）
- linux命令学习一 ：touch和mkdir 创建文件和文件夹
- 郭炜：就算倒在离开源成功最近的五米，也要让下一代开源人坚定前行
- Chrome之倍速播放
- 如何使用Fiddler抓包某奇艺小程序视频下载
- 视听说教程（第三版）4 quiz 10