第8章 JavaScript编程基础-补充案例
第8章补充案例
【案例8-1】弹出一个警示框
一、案例描述
1、考核知识点
alert()函数
2、练习目标
掌握alert()函数的应用。
3、需求分析
在浏览网页时，经常会看到一些弹出的警示框，用于提醒用户当前的操作是否完成，例如，在电商网站中，当完成付款时，会弹出支付情况的警示框。下面，本案例将通过引入JavaScript的相关知识创建一个“支付已完成！”的警示框。
4、案例分析
1)效果如图8-1所示。
图8-1“支付已完成！”效果展示
2)具体实现步骤如下：
a)使用内嵌式引入JavaScript。
b)通过alert()函数输出字符串。
二、案例实现
根据上面的分析，可以通过简单的JavaScript代码来实现这一效果，具体代码如下：
1
2"https://www.360docs.net/doc/2612282157.html,/TR/xhtml1/DTD/xhtml1-transitional.dtd">
3
4
5
6
7
1
2
8
912 13
保存后，在火狐浏览器中预览，效果如图8-2所示。
图8-2
“支付已完成！”效果展示
【案例8-2】 简短的文字描述 一、案例描述
1、 考核知识点 变量的声明与赋值
2、 练习目标
掌握变量声明与赋值的应用。 3、 需求分析
网页中的文字描述是传输网页信息的重要途径，尤其是一些新闻网页，文字描述占有很大的篇幅，本
案例将通过定义变量的方法引入一段文字，其中不变的内容通过字符串输出。
4、 案例分析
1) 效果如图8-3所示。
图8-3 简短的文字描述
2) 具体实现步骤如下：
a) 设置body 的背景色，并定义文字样式。 b) 声明变量并进行赋值。
3
二、案例实现
根据上面的分析，可以通过简单的JavaScript 代码来实现这一效果，具体代码如下：
1
"https://www.360docs.net/doc/2612282157.html,/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 3 4
5
6
7 14 15
16
25
26保存后，在火狐浏览器中预览，效果如图8-4所示。
图8-4 “文字描述”效果展示
【案例8-3】手动跳转焦点图
一、案例描述
1、考核知识点
调用函数
2、练习目标
掌握调用函数的方法。
能够准确修改元素样式。
了解鼠标移入事件。
3、需求分析
在浏览一些电商站时经常会看到一些大的焦点图映入眼帘，不仅使整个网站看起来更加美观，还增加了网站的点击量。本案例将通过JavaScript调用函数的方法，制作一款手动跳转的焦点图。
4、案例分析
1)刚打开页面时，效果如图8-5所示。
图8-5手动跳转焦点图1
当鼠标移到第二个按钮时，效果如图8-6所示。
4
5
图8-6 手动跳转焦点图2
2) 具体实现步骤如下：
a) 图片由标记定义，按钮由无序列表
- 定义，外部嵌套的大盒子由
- 左浮动，并设置其宽高、背景颜色、外边距及文字样式。 e) 通过鼠标移入事件调用函数。
二、案例实现
1、制作页面结构
新建HTML 页面，具体代码如下：
1
2 "https://www.360docs.net/doc/2612282157.html,/TR/xhtml1/DTD/xhtml1-transitional.dtd">
3
4
5
6
手动跳转焦点图 7
8
9
10
11 - 12
- 1 13
- 2
14
15
16 17
2、定义CSS 样式
6
对应的CSS 样式代码如下：
1 *{margin:0;padding:0;} 2
ul{list-style: none;} 3 .box{ 4 width: 730px; 5 height: 454px; 6 margin:100px auto; 7 position: relative;
8 }
9 .box ul{ 10 position:absolute; 11 bottom:10px; 12 right:10px; 13 }
14 .box ul li{ 15 float: left; 16 height: 20px; 17 width:20px; 18 background: #ccc; 19 margin:0 5px; 20 text-align: center; 21 font:12px/20px "宋体"; 22 cursor: pointer; 23 }
保存后，在火狐浏览器中预览，效果如图8-7所示。
图8-7 CSS 效果展示
7
3、添加JavaScript 效果
添加JavaScript 效果，具体代码如下：
1 function two()
2 {
3 document.getElementById("pic").src="images/2.jpg";
4 document.getElementById("twice").style.backgroundColor="pink";
5 document.getElementById("first").style.backgroundColor="";
6 }
7 function one(){
8
document.getElementById("pic").src="images/1.jpg";
9 document.getElementById("first").style.backgroundColor="pink"; 10 document.getElementById("twice").style.backgroundColor=""; 11
}
刷新页面后，鼠标划过按钮，按钮样式随图片一同变化。
【案例8-4】年龄计算小游戏 一、案例描述
1、 考核知识点
节点的访问
2、 练习目标
掌握获取对象的方法。 了解鼠标点击事件。
3、 需求分析
运用JavaScript 中的表达式可以实现很多有趣的效果，本案例将带领大家制作一款年龄计算小游戏，输入出生年份，点击“计算年龄”按钮，即可得出相应的年龄。
4、 案例分析
1) 效果如图8-8所示。
图8-8 效果展示1
当输入出生年份后，点击“计算年龄”按钮时，效果如图8-9所示。
图8-9效果展示2
2)具体实现步骤如下：
a)获取按钮对象。
b)获取文本框的值。
c)通过alert()函数输出年龄结果。
二、案例实现
根据上面的分析，可以通过简单的JavaScript代码来实现这一效果，具体代码如下：
1
2"https://www.360docs.net/doc/2612282157.html,/TR/xhtml1/DTD/xhtml1-transitional.dtd">
3
4
5
6
计算年龄 7
18
19
20
21
22
运行代码，输入出生年份后，点击“计算年龄”按钮，即可得到图8-9所示的效果。
8
【案例8-5】淘宝商品展示
一、案例描述
1、考核知识点
调用函数
2、练习目标
掌握调用函数的方法。
能够准确修改元素样式。
了解鼠标移入事件。
3、需求分析
现如今网上购物已经算是一种时代潮流，足不出户就能满足大家的需求，因为是网购所以店家都是通过照片来展示自己的商品，使买家在外观上对商品有初步的了解，本案例将更深入的学习函数的调用，完成淘宝商品展示效果。
4、案例分析
1)效果如图8-10所示。
图8-10淘宝商品展示效果
当鼠标在下面的小图部分滑动时，上面的大图会随着一起变化。
2)具体实现步骤如下：
a)大盒子通过
标记定义，小图标通过无序列表- 定义。
- 左浮动。
9
二、案例实现
1、制作页面结构
新建HTML页面，具体代码如下：
1
2"https://www.360docs.net/doc/2612282157.html,/TR/xhtml1/DTD/xhtml1-transitional.dtd">
3
4
5
6
淘宝商品展示 7
8
9
10
11
12
13
14
15
16
17
18
19
2、定义CSS样式
对应的CSS样式代码如下：
1*{margin:0;padding:0;}
2ul{list-style: none;}
3#box
4{
5width:360px;
6height: 70px;
7border:1px solid #ccc;
8margin:100px auto;
9padding-top: 360px;
10background: url(images/01big.jpg) 0 0 no-repeat;
11}
12#box ul li{
13float: left;
14cursor: pointer;
15}
保存后，在火狐浏览器中预览，效果如图8-11所示。
10
图8-11CSS效果展示
3、添加JavaScript效果
添加JavaScript效果，具体代码如下：
1window.onload=function(){
2var BOSS=document.getElementById("box"); // 获取box 更换背景图片用的
3 function fun(lili,address) //封装函数
4 {
5 var pic=document.getElementById(lili); //获取li事件源
6 pic.onmouseover=function(){
7 BOSS.style.background=address; //更换背景
8 }
9 } // 函数自己不执行除非被调用
10//函数调用
11fun("li01","url(images/01big.jpg) 0 0 no-repeat");
12fun("li02","url(images/02big.jpg) 0 0 no-repeat");
13fun("li03","url(images/03big.jpg) 0 0 no-repeat");
14fun("li04","url(images/04big.jpg) 0 0 no-repeat");
15fun("li05","url(images/05big.jpg) 0 0 no-repeat");
16}
刷新页面，鼠标移动到第二个小图标时，效果如图8-12所示。
11
图8-12切换效果展示
【案例8-6】下拉菜单更换皮肤
一、案例描述
1、考核知识点
switch语句
2、练习目标
掌握switch语句。
能够准确修改元素样式。
3、需求分析
随着互联网技术的不断进步，网页已经不仅仅局限于向用户传达信息，更专注于用户体验，例如，通过“更换皮肤”，“改变字号”等，来增加页面的友好程度。本案例将通过条件语句中的switch语句来实现网页的换肤功能。
4、案例分析
1)效果如图8-13所示。
12
点击下拉菜单中的“夏日炎炎”，效果如图8-14所示。
图8-14夏日炎炎
2)具体实现步骤如下：
a)通过
b)为body添加背景图片。
c)获取下拉菜单，通过switch语句改变背景颜色。
二、案例实现
1、制作页面结构
新建HTML页面，具体代码如下：
1
2"https://www.360docs.net/doc/2612282157.html,/TR/xhtml1/DTD/xhtml1-transitional.dtd">
3
4
5
13
14
6
下拉菜单更换皮肤 7
8
9
14
15 16
2、定义CSS 样式
对应的CSS 样式代码如下：
body{background: url(images/chun1.jpg);}
保存后，在火狐浏览器中预览，效果如图8-15所示。
图8-15 CSS 效果展示
3、添加JavaScript 效果
添加JavaScript 效果，具体代码如下：
1 window.onload=function(){
2 var sele=document.getElementById("sele");//获取下拉菜单
3 sele.onchange=function(){
4 switch(this.value)
5 {
6 case "春意绵绵":
7 document.body.style.background=" url(images/chun1.jpg)"; 8 break; 9 case "2":
10
document.body.style.background=" url(images/xia1.jpg)";
15
11 break; 12 case "3":
13 document.body.style.background=" url(images/qiu1.jpg)"; 14 break; 15 case "4":
16 document.body.style.background=" url(images/dong1.jpg)"; 17 break;
18 }
19 }
20
}
刷新页面，选择下拉菜单中的季节，背景图片会发生相应的变化。
【案例8-7】简单的表单验证 一、案例描述
1、
考核知识点 if …else if …else …条件语句
2、 练习目标
掌握if …
else if …else …条件语句。 了解失去焦点事件。 3、 需求分析
登陆界面对于大家来说应该很常见，当信息输入正确或错误时都会出现不同的提示信息，学生成绩同样可以通过表单进行验证，本案例将通过条件语句中的if …else if …else …语句完成学生成绩的验证。
4、 案例分析
1) 效果如图8-16所示。
图8-16 输入前效果展示
当输入为空时效果如图8-17所示。
图8-17 输入为空时效果展示
当输入信息错误时效果如图8-18所示。
图8-18 输入错误时效果展示
当输入信息正确时效果如图8-19所示。
图8-19 输入正确时效果展示
2) 具体实现步骤如下：
a)结构分析如图8-20所示。
图8-20结构分析
b)定义大盒子的宽及外边距。
c)定义左右两侧的盒子左浮动，并为左侧的盒子设置外右边距。
d)定义左侧表单的高及外边框。
e)定义右侧盒子的宽高、外边框、背景颜色、文字样式等。
f)通过条件语句判断表单的值，右侧盒子得出相应的结果。
二、案例实现
1、制作页面结构
新建HTML页面，具体代码如下：
1
2"https://www.360docs.net/doc/2612282157.html,/TR/xhtml1/DTD/xhtml1-transitional.dtd">
3
4
5
6
简单的表单验证 7
8
9
10
11
12
13
14
15
16
17
2、定义CSS样式
对应的CSS样式代码如下：
1*{margin:0;padding:0;}
2.box{width: 500px; margin:100px auto;}
3.left,.message{float: left;}
16
4.left{ margin-right:20px;}
5input{
6border:1px solid #ccc;
7height: 20px;
8}
9.message{
10width: 170px;
11 height: 20px;
12 border:1px solid #ccc;
13background-color: #EEE;
14line-height: 20px;
15color:#ccc;
16font-size: 12px;
17padding-left: 30px;
18}
19.wrong /* 错误类 */
20{
21border: 1px solid #FFD2D2;
22color:red;
23background: #FFEEEE;
24}
25.right{
26border: 1px solid #CEFFCE;
27color:green;
28background: #ECFFEC;
29}
保存后，在火狐浏览器中预览，效果如图8-21所示。
图8-21CSS效果展示
3、添加JavaScript效果
添加JavaScript效果，具体代码如下：
1window.onload=function(){
2var txt=document.getElementById("txt"); //获取事件源
3var me=document.getElementById("me");
17
18
4 txt.onblur=function(){
5 if(this.value=="")
6 {
7 me.className="message wrong";
8 me.innerHTML="语文成绩内容不能为空";
9 }
10 else if(this.value<0||this.value>150||isNaN(this.value)) 11 { 12
me.className="message wrong"; 13 me.innerHTML="语文成绩输入不合法"; 14 } 15 else 16 { 17 me.className="message right"; 18 me.innerHTML="恭喜，输入正确"; 19 } 20 }
21 }
刷新页面后，输入表单信息，点击右侧盒子即可得出验证结果。
【案例8-8】星座查询 一、案例描述
1、 考核知识点
switch 语句
2、 练习目标
掌握switch 语句。 了解鼠标点击事件。
3、 需求分析
关于星座大家应该都不陌生，不同的星座决定了不同的性格，本案例将制作一款星座查询小工具，输入您的星座便可查询到相应的结果。
4、 案例分析
1) 打开页面时，效果如图8-22所示。
图8-22 星座查询效果展示
现以白羊座为例，当在表单内输入白羊座后，点击查询按钮，效果如图8-23所示。
19
图8-23 白羊座查询效果展示
如果输入的信息不正确，则弹出如图8-24所示对话框。
图8-24 提示对话框
2) 具体实现步骤如下：
a) 表单由标记定义，按钮由
b)控制大盒子的宽高和内外边距，并设定大盒子的背景图片。
c)定义
- 标记设置绝对定位。
d) 定义
