第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"/TR/xhtml1/DTD/xhtml1-transitional.dtd">

3

4

5

6

7

1

2 8

9

12

13

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

图8-2 “支付已完成！”效果展示

【案例8-2】 简短的文字描述

一、案例描述

1、 考核知识点

变量的声明与赋值

2、 练习目标

掌握变量声明与赋值的应用。 3、 需求分析

网页中的文字描述是传输网页信息的重要途径，尤其是一些新闻网页，文字描述占有很大的篇幅，本案例将通过定义变量的方法引入一段文字，其中不变的内容通过字符串输出。

4、 案例分析

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

图8-3 简短的文字描述

2) 具体实现步骤如下：

a) 设置body 的背景色，并定义文字样式。

b) 声明变量并进行赋值。

3 二、案例实现

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

2

"/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) 图片由标记定义，按钮由无序列表

定义，外部嵌套的大盒子由
定义。

b) 控制大盒子的宽高和外边距，并对大盒子设置相对定位。

c) 对

标记设置绝对定位。

d) 定义

• 左浮动，并设置其宽高、背景颜色、外边距及文字样式。

  e) 通过鼠标移入事件调用函数。

  二、案例实现

  1、制作页面结构 新建HTML 页面，具体代码如下：

  1

  2 "/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 样式