笔者当年还是一枚小白的时候,经常被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
05
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
11 </head>
12 <body>
13
16 </body>
17 </html>
【范例4-6 询问读者是否是弱智的页面question.html】
01 <!DOCTYPE>
02 <html xmlns="http://www.w3.org/1999/xhtml">
03 <head>
04
05
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
11 </head>
12 <body>
13
18 </body>
19 </html>
【范例4-7 另一个询问页面confirm.html】
01 <!DOCTYPE>
02 <html xmlns="http://www.w3.org/1999/xhtml">
03 <head>
04
05
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
11 </head>
12 <body>
13
18 </body>
19 </html>
【范例4-8 游戏结束页面result.html】
01 <!DOCTYPE>
02 <html xmlns="http://www.w3.org/1999/xhtml">
03 <head>
04
05
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
11 </head>
12 <body>
13
早点承认不就好了么,何必这么麻烦!
1516 </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移动应用实战》的例子就好了。
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用
。你还可以使用@
来通知其他用户。