第8章 JavaScript编程基础-补充案例

博学谷——让IT教学更简单，让IT学习更有效

图8-6 手动跳转焦点图2

2) 具体实现步骤如下：

a) 图片由标记定义，按钮由无序列表

定义，外部嵌套的大盒子由
定义。 b) 控制大盒子的宽高和外边距，并对大盒子设置相对定位。 c) 对

标记设置绝对定位。

d) 定义

• 左浮动，并设置其宽高、背景颜色、外边距及文字样式。 e) 通过鼠标移入事件调用函数。

  二、案例实现

  1、制作页面结构

  新建HTML页面，具体代码如下：

  1

  5 手动跳转焦点图 7 8 9 10 11 12 13 14 15

  

16 17

2、定义CSS样式

5

博学谷——让IT教学更简单，让IT学习更有效

对应的CSS样式代码如下：

1 *{margin:0;padding:0;} 2 ul{list-style: none;} 3 .box{ 4 5 6 7 8 }

9 .box ul{ 10 11 12 13 }

14 .box ul li{ 15 16 17 18 19 20 21 22 23 }

float: left; height: 20px; width:20px; background: #ccc; margin:0 5px; text-align: center; font:12px/20px \宋体\cursor: pointer; position:absolute; bottom:10px; right:10px; width: 730px; height: 454px; margin:100px auto; position: relative;

保存后，在火狐浏览器中预览，效果如图8-7所示。

图8-7 CSS效果展示

6

博学谷——让IT教学更简单，让IT学习更有效 3、添加JavaScript效果

添加JavaScript效果，具体代码如下：

1 function two() 2 3 4 5 6 8 9 10 11

{ } }

document.getElementById(\

document.getElementById(\ document.getElementById(\ document.getElementById(\

document.getElementById(\ document.getElementById(\

7 function one(){

刷新页面后，鼠标划过按钮，按钮样式随图片一同变化。

【案例8-4】年龄计算小游戏 一、案例描述

1、 考核知识点

节点的访问

2、 练习目标

? 掌握获取对象的方法。 ? 了解鼠标点击事件。

3、 需求分析

运用JavaScript中的表达式可以实现很多有趣的效果，本案例将带领大家制作一款年龄计算小游戏，输入出生年份，点击“计算年龄”按钮，即可得出相应的年龄。

4、 案例分析

1) 效果如图8-8所示。

图8-8 效果展示1

当输入出生年份后，点击“计算年龄”按钮时，效果如图8-9所示。

7

博学谷——让IT教学更简单，让IT学习更有效

图8-9 效果展示2

2) 具体实现步骤如下： a) 获取按钮对象。 b) 获取文本框的值。

c) 通过alert()函数输出年龄结果。

二、案例实现

根据上面的分析，可以通过简单的JavaScript代码来实现这一效果，具体代码如下：

1

5 计算年龄

7 18 19 20

21 22

运行代码，输入出生年份后，点击“计算年龄”按钮，即可得到图8-9所示的效果。

8

• 1
• 2
• 3
• 4
• 5
• >>
• 12