3.2 HTML 5的若干练习
上一节提出了10个关于HTML 5的问题，如果你能够答对7个以上，那你可以直接跳过本节了。但是如果你没有答对6个问题，还请你耐心地在本节中接受几个实战锻炼，跟着笔者用HTML 5来实现几个简单的界面。
3.2.1 实现渐变的背景和圆角的按钮
在Cordova中，一切的界面都是利用HTML 5来实现的，其中背景颜色和按钮是非常重要的两个元素，那么在本小节中将开始实现一组利用HTML 5制作的按钮样式。
【范例3-1】利用HTML 5实现渐变的背景和圆角的按钮。
01 <! DOCTYPE html>
02 <html>
03 <head>
04 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
05 <title>利用HTML 5实现渐变的背景和圆角的按钮</title>
06 <style>
07 * { margin:0; } /* 清除页面默认边距 */
08 #back_ground /* 设置背景 */
09 {
10 width:100%; /* 背景宽度与屏幕相同 */
11 min-height:660px; /* 高度 */
12 background:-webkit-linear-gradient(top, #ccc, #000); /* 设置背景渐变颜色 */
13 float:left;
14 }
15 #top_pic /* 顶部背景图片 */
16 {
17 width:100%; /* 宽度 */
18 height:270px;
19 float:left;
20 }
21 .button /* 设置各个按钮样式 */
22 {
23 width:84%;
24 height:50px;
25 margin:15px 8%;
26 border: 5px solid;
27 -webkit-border-radius: 15px; /* 设置webkit浏览器下兼容的圆角 */
28 border-radius:15px; /* 设置圆角 */
29 float:left;
30 font-size:32px; /* 设置字体 */
31 line-height:50px;
32 color:#FFF;
33 text-align:center;
34 }
35 #button_1 /* 设置各个按钮的颜色 */
36 {
37 border-color:#FFF; /* 按钮一边框为白色 */
38 }
39 #button_2
40 {
41 background-color:#F00; /* 按钮二背景颜色为红色 */
42 background:#FF0; /* 按钮二背景颜色为黄色 */
43 }
44 #button_3
45 {
46 border-color:#345; /* 按钮三边框颜色为灰色 */
47 background:-webkit-linear-gradient(top, #f00, #fff); /* 按钮三背景颜色渐变
*/
48 }
49 #button_4
50 {
51 border-color:#fff; /* 按钮四边框颜色为白色 */
52 background:-webkit-linear-gradient(left, #f00, #fff);
/* 按钮四背景颜色渐变，且方向与按钮三不同 */
53 }
54 </style>
55 </head>
56 <body>
57 <div id="back_ground">
58 <div id="top_pic">
59 <img src="pic.jpg" width="100%" height="100%" />
60 </div>
61 <div class="button" id="button_1">
62 按钮一
63 </div>
64 <div class="button" id="button_2">
65 按钮二
66 </div>
67 <div class="button" id="button_3">
68 按钮三
69 </div>
70 <div class="button" id="button_4">
71 按钮四
72 </div>
73 </div>
74 </body>
75 </html>
运行之后的界面如图3-1所示。
图3-1 利用HTML 5实现渐变的背景和圆角的按钮
读者可以对比范例中的代码和图3-1，现在对该范例的几个知识点分别进行讲解。
（1）在屏幕的最顶部，可以清楚地看到一张老虎的照片，一般在应用的顶部常常会采用类似的方式来展示一些图片或新闻。通常的做法是使用一个宽度与屏幕相同而高度固定的div标签在屏幕上占据一定的位置，然后使用img标签具体指定显示图片的内容。
提示
虽然在CSS 3中已经有了背景图像的拉伸属性，但是由于在真实开发中顶部所使用的图片往往还需要加入一些滚动的特效，因此还是建议单独使用一个标签来显示图像。
（2）仔细观察图3-1的话能够看到页面的背景是有一定渐变的，这也是CSS 3中的一个新特性，可以通过设置linear-gradient的值来产生背景颜色渐变的效果，如范例第12行所示。
注意
由于手机上大多使用webkit内核的浏览器，因此读者如果选择在PC上对本范例进行测试也许会与预期有些区别，这时就可以将范例中的-webkit-linear-gradient修改为-mozlinear-gradient和-ms-linear-gradient。
（3）除了渐变背景之外，圆角也是在CSS 3中最常被用到的一个属性，可以通过属性border-radius来设置圆角的半径，如范例中第27行和第28行所示。
（4）还有相当重要的一点就是当为移动设备设计界面时，由于各种屏幕尺寸差异较大，可能无法一一适配最完美的显示方案，因此在设计时要尽量让每个元素都单独占据一排的位置（如图3-1中的4个按钮）或者是两个、三个元素平分一排，这样能够让界面具有更强的“抗变形”能力。
3.2.2 利用JavaScript响应用户的操作
以上利用HTML 5和CSS 3实现了一个简单的界面，但是如果想要对它进行操作还要搭配上JavaScript才行。
【范例3-2】利用JavaScript响应用户的操作。
01 <! DOCTYPE html>
02 <html>
03 <head>
04 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
05 <title>利用JavaScript响应用户的操作</title>
06 <style>
07 <! —省略部分CSS样式，具体内容可参考范例3-1 -->
08 </style>
09 <script>
10 function click_1() {
11 var a = document.getElementById("image"); // 获取img标签
12 a.src = "pic1.jpg"; // 更换img中的图片
13 }
14 function click_2() {
15 alert("按钮二被按下"); // 弹出对话框
16 }
17 function click_3() {
18 alert("按钮三被按下"); // 弹出对话框
19 }
20 function click_4() {
21 alert("按钮四被按下"); // 弹出对话框
22 }
23 </script>
24 </head>
25 <body>
26 <div id="back_ground">
27 <div id="top_pic">
28 <img src="pic.jpg" width="100%" height="100%" id="image"/>
29 </div>
30 <div class="button" id="button_1" onClick="click_1(); ">
31 按钮一
32 </div>
33 <div class="button" id="button_2" onClick="click_2(); ">
34 按钮二
35 </div>
36 <div class="button" id="button_3" onClick="click_3(); ">
37 按钮三
38 </div>
39 <div class="button" id="button_4" onClick="click_4(); ">
40 按钮四
41 </div>
42 </div>
43 </body>
44 </html>
运行之后界面与图3-1相同，但是当用户点击“按钮一”时顶部的图像就会改变，而用户点击其他几个按钮时则会显示相应的对话框，如图3-2和图3-3所示。
图3-2 点击“按钮一”后顶部的图片变化
图3-3 点击“按钮二”后弹出对话框
这是由于在范例的第9~23行声明了4个JavaScript函数，而在下面的第30、33、36和39行中使用div标签的onClick方法，对它们分别进行了调用。
提示
在实际开发中对JavaScript只需要了解到如何使用它来弹出对话框或者显示内容到页面上就足够一般应用的开发了。当然随着层次的深入还会涉及执行效率等问题，不过这不是本书应当讨论的内容。
3.2.3 利用CSS 3生成动画
在前面的内容中已经通过HTML 5和CSS 3制作了一个简单的界面，并且使用JavaScript实现了对用户操作的响应。不过相对当前网上各种炫目的特效而言，这种例子似乎是有点令读者感觉到无聊。那好，在本节中将利用HTML 5来实现一些高级一点的功能。
“写轮眼”是漫画《火影忍者》中的一种技能，许多应用开发者会把它当作应用的开场动画来使用，本小节就以此为例使用CSS 3的动画功能实现“写轮眼”的效果。
【范例3-3】利用CSS 3生成动画。
01 <! DOCTYPE html>
02 <html>
03 <head>
04 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
05 <title>利用CSS 3生成动画</title>
06 <style>
07 body { background-color:#F00; }
08 #rec
09 {
10 width:300px;
11 height:700px;
12 margin:auto;
13 }
14 #title
15 {
16 width:300px;
17 height:40px;
18 font-size:24px;
19 color:#FFF;
20 text-align:center;
21 line-height:40px;
22 float:left;
23 }
24 #eye
25 {
26 margin-top:70px;
27 width:300px;
28 height:300px;
29 float:left;
30 background:url(bg.png);
31 }
32 #round
33 {
34 width:300px;
35 height:300px;
36 background:url(rote.png);
37 animation: myrole 5s;
38 -webkit-animation: myrole 5s;
39 animation-iteration-count:infinite;
40 -webkit-animation-iteration-count:infinite;
41 }
42 @keyframes myrole
43 {
44 from
45 {
46 transform: rotate(0deg);
47 -webkit-transform: rotate(0deg);
48 }
49 to
50 {
51 transform: rotate(360deg);
52 -webkit-transform: rotate(360deg);
53 }
54 }
55 @-webkit-keyframes myrole
56 {
57 from
58 {
59 transform: rotate(0deg);
60 -webkit-transform: rotate(0deg);
61 }
62 to
63 {
64 transform: rotate(360deg);
65 -webkit-transform: rotate(360deg);
66 }
67 }
68 </style>
69 </head>
70 <body>
71 <div id="rec">
72 <div id="title">CSS 3动画实现的写轮眼</div>
73 <div id="eye">
74 <div id="round"></div>
75 </div>
76 </div>
77 </body>
78 </html>
运行之后的结果如图3-4所示。也许单纯使用图片无法展示出笔者真实看到的画面，但是当运行代码之后可以清楚地看到“写轮眼”确实在旋转。
图3-4 旋转的写轮眼
这种效果是依靠CSS的动画属性实现的，在范例的第37行和第38行是对屏幕上旋转部分所使用动画的定义，而这个动画的具体效果则是需要开发者根据需要进行设计的，如范例第42~67行所示。
提示
在使用一些CSS 3中的属性时，有时会需要加入一些特定的前缀，比如-webkit-、-moz等，而在介绍时为了方便一般都不会特别进行说明，比如范例第37行和第38行的animation属性和-webkit-属性其实是同样的作用，遇到类似的情况请读者根据范例进行简单理解即可。
通过范例中对动画进行定义部分的阅读可以发现，CSS 3对动画的定义实际上就是在由from和to所包含的区间中，利用CSS的样式来声明元素在动画的开始和结束时所处的状态，然后由浏览器实现其间过程的变化。
还可以通过对元素的animation-iteration-count属性进行设置来控制动画播放的次数，由于本范例中希望“写轮眼”能够一直旋转，因此就将它的值设置为infinite。
3.2.4 利用JavaScript让“流氓兔”跑步
以上利用CSS 3实现了漫画《火影忍者》中“写轮眼”的效果，本小节依旧要实现一段动画，不过显示的内容就要可爱多了。
【范例3-4】利用JavaScript让流氓兔跑步。
01 <! DOCTYPE html>
02 <html>
03 <head>
04 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
05 <title>利用JavaScript让流氓兔跑步</title>
06 <style>
07 body { background-color:#FFF; } /* 背景颜色为白色 */
08 #rec
09 {
10 width:300px;
11 height:700px;
12 margin:auto;
13 }
14 #title /* 动画顶部的标题 */
15 {
16 width:300px;
17 height:40px;
18 font-size:24px;
19 color:#FFF;
20 text-align:center;
21 line-height:40px;
22 float:left;
23 }
24 #tuzi /* 流氓兔将在此元素中显示 */
25 {
26 width:300px;
27 height:300px;
28 float:left;
29 }
30 </style>
31 <script>
32 var step = 0; // 用于记录流氓兔运动的状态
33 setInterval(show,150);
34 function show() {
35 if(step%4 == 0) {
36 var a = document.getElementById("donghua"); // 获取流氓兔显示的元素
37 a.src= "IMG00.bmp"; // 切换流氓兔显示的图片
38 }else if (step%4 == 1) {
39 var a = document.getElementById("donghua");
40 a.src= "IMG01.bmp";
41 }else if (step%4 == 2) {
42 var a = document.getElementById("donghua");
43 a.src= "IMG02.bmp";
44 }else if (step%4 == 3) {
45 var a = document.getElementById("donghua");
46 a.src= "IMG03.bmp";
47 }
48 step++;
49 }
50 </script>
51 </head>
52 <body>
53 <div id="rec">
54 <div id="title">利用JavaScript让流氓免跑步</div>
55 <div id="tuzi">
56 <img src="IMG00.bmp" width="100%" height="100%" id="donghua" />
57 </div>
58 </div>
59 </body>
60 </html>
运行后的画面如图3-5所示，虽然无法利用图片来描述，但是可以保证的是，确实能够看到流氓兔在屏幕上跑起来了。
图3-5 流氓兔跑步的画面
利用JavaScript显示动画时，会用到计数器函数setInterval，它可以按照一定的周期重复执行一系列的操作。比如本范例中就会以150ms为周期反复执行自定义函数show()（如范例第33行所示）。
范例第34~49行是对show函数的定义，可以看出该函数利用了变量step除以4所得的余数来表示流氓兔跑步的动作，从而更换页面上应当显示的图片，给用户一种流氓兔在跑步的效果。
经证实，使用JavaScript实现的动画执行效率要远低于使用CSS 3的动画属性来显示动画，因此在开发游戏时要尽量使用CSS 3而不是JavaScript，但是在本书中将会提到的一个“像素鸟”的例子仍然采用了JavaScript的方法，这是出于方便理解的目的，还请读者能够体谅。