第8章补充案例【案例8-1】弹出一个警示框一、案例描述1、考核知识点alert()函数2、练习目标掌握alert()函数的应用。
3、需求分析在浏览网页时，经常会看到一些弹出的警示框，用于提醒用户当前的操作是否完成，例如，在电商网站中，当完成付款时，会弹出支付情况的警示框。
下面，本案例将通过引入JavaScript的相关知识创建一个“支付已完成！”的警示框。
4、案例分析1)效果如图8-1所示。
图8-1“支付已完成！”效果展示2)具体实现步骤如下：a)使用内嵌式引入JavaScript。
b)通过alert()函数输出字符串。
二、案例实现根据上面的分析，可以通过简单的JavaScript代码来实现这一效果，具体代码如下：1<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"2"/TR/xhtml1/DTD/xhtml1-transitional.dtd">3<html xmlns="/1999/xhtml" xml:lang="en">4<head>5<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">6<title>弹出一个警示框</title>7</head>12 8 <body>9<script type="text/javascript"> 10alert("支付已完成！") 11 </script>12 </body>13 </html>保存后，在火狐浏览器中预览，效果如图8-2所示。
图8-2 “支付已完成！”效果展示【案例8-2】 简短的文字描述一、案例描述1、 考核知识点变量的声明与赋值2、 练习目标掌握变量声明与赋值的应用。
3、 需求分析网页中的文字描述是传输网页信息的重要途径，尤其是一些新闻网页，文字描述占有很大的篇幅，本案例将通过定义变量的方法引入一段文字，其中不变的内容通过字符串输出。
4、 案例分析1) 效果如图8-3所示。
图8-3 简短的文字描述2) 具体实现步骤如下：a) 设置body 的背景色，并定义文字样式。
b) 声明变量并进行赋值。
3 二、案例实现根据上面的分析，可以通过简单的JavaScript 代码来实现这一效果，具体代码如下： 1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"2"/TR/xhtml1/DTD/xhtml1-transitional.dtd">3 <html xmlns="/1999/xhtml" xml:lang="en">4 <head>5 <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">6 <title>简短的文字描述</title>7 <style type="text/css">8body{ 9background: #4bceff; 10color:#fff; 11font-weight: bold;12 } 13 </style>14 </head>15 <body><p>16<script type="text/javascript"> 17var name; //声明变量name 18name="张三"; //把字符串“张三”存储到变量name 中 19age=20; //变量age 被隐式声明，并赋值整数20 20document.write(name); //读取变量name 的值，并将它显示在页面上 21document.write("的年龄是:");//在页面上输出字符串“的年龄是：” 22document.write(age); //读取变量age 的值，并将它显示在页面上 23document.write("岁"); //输出字符串“岁” 24 </script>25 </p></body>26 </html>保存后，在火狐浏览器中预览，效果如图8-4所示。
图8-4 “文字描述”效果展示【案例8-3】手动跳转焦点图一、案例描述1、考核知识点调用函数2、练习目标掌握调用函数的方法。
能够准确修改元素样式。
了解鼠标移入事件。
3、需求分析在浏览一些电商站时经常会看到一些大的焦点图映入眼帘，不仅使整个网站看起来更加美观，还增加了网站的点击量。
本案例将通过JavaScript调用函数的方法，制作一款手动跳转的焦点图。
4、案例分析1)刚打开页面时，效果如图8-5所示。
图8-5手动跳转焦点图1当鼠标移到第二个按钮时，效果如图8-6所示。
45图8-6 手动跳转焦点图22) 具体实现步骤如下：a) 图片由<img>标记定义，按钮由无序列表<ul>定义，外部嵌套的大盒子由<div>定义。
b) 控制大盒子的宽高和外边距，并对大盒子设置相对定位。
c) 对<ul>标记设置绝对定位。
d) 定义<li>左浮动，并设置其宽高、背景颜色、外边距及文字样式。
e) 通过鼠标移入事件调用函数。
二、案例实现1、制作页面结构 新建HTML 页面，具体代码如下：1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"2 "/TR/xhtml1/DTD/xhtml1-transitional.dtd">3 <html xmlns="/1999/xhtml" xml:lang="en">4 <head>5 <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">6 <title>手动跳转焦点图</title>7 </head>8 <body>9<div class="box"> 10<img src="images/1.jpg" alt="" id="pic" /> 11<ul> 12<li id="first" style="background:pink;" onmouseover="one()" >1</li> 13<li id="twice" onmouseover="two()" >2</li> <!-- 第二个事件源 --> 14</ul> 15 </div>16 </body>17 </html>2、定义CSS 样式6 对应的CSS 样式代码如下： 1 *{margin:0;padding:0;}2ul{list-style: none;}3 .box{4width: 730px; 5height: 454px; 6margin:100px auto; 7position: relative;8 }9 .box ul{10position:absolute; 11bottom:10px; 12right:10px; 13 }14 .box ul li{15float: left; 16height: 20px; 17width:20px; 18background: #ccc; 19margin:0 5px; 20text-align: center; 21font:12px/20px "宋体"; 22cursor: pointer; 23 } 保存后，在火狐浏览器中预览，效果如图8-7所示。
图8-7 CSS 效果展示7 3、添加JavaScript 效果 添加JavaScript 效果，具体代码如下：1 function two()2{ 3document.getElementById("pic").src="images/2.jpg"; 4document.getElementById("twice").style.backgroundColor="pink"; 5document.getElementById("first").style.backgroundColor=""; 6} 7 function one(){8document.getElementById("pic").src="images/1.jpg"; 9document.getElementById("first").style.backgroundColor="pink"; 10document.getElementById("twice").style.backgroundColor=""; 11 } 刷新页面后，鼠标划过按钮，按钮样式随图片一同变化。
【案例8-4】年龄计算小游戏一、案例描述1、 考核知识点节点的访问2、 练习目标掌握获取对象的方法。
了解鼠标点击事件。
3、 需求分析运用JavaScript 中的表达式可以实现很多有趣的效果，本案例将带领大家制作一款年龄计算小游戏，输入出生年份，点击“计算年龄”按钮，即可得出相应的年龄。