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

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

第8章补充案例

【案例8-1】 弹出一个警示框 一、案例描述

1、 考核知识点

alert()函数

2、 练习目标

? 掌握alert()函数的应用。

3、 需求分析

在浏览网页时，经常会看到一些弹出的警示框，用于提醒用户当前的操作是否完成，例如，在电商网站中，当完成付款时，会弹出支付情况的警示框。下面，本案例将通过引入JavaScript的相关知识创建一个“支付已完成！”的警示框。

4、 案例分析

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

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

2) 具体实现步骤如下：

a) 使用内嵌式引入JavaScript。 b) 通过alert()函数输出字符串。

二、案例实现

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

1 5 6

弹出一个警示框

7

1

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

8 9 10 11

25

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

图8-4 “文字描述”效果展示

3

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

【案例8-3】手动跳转焦点图 一、案例描述

1、 考核知识点

调用函数

2、 练习目标

? 掌握调用函数的方法。 ? 能够准确修改元素样式。 ? 了解鼠标移入事件。

3、 需求分析

在浏览一些电商站时经常会看到一些大的焦点图映入眼帘，不仅使整个网站看起来更加美观，还增加了网站的点击量。本案例将通过JavaScript调用函数的方法，制作一款手动跳转的焦点图。

4、 案例分析

1) 刚打开页面时，效果如图8-5所示。

图8-5 手动跳转焦点图1

当鼠标移到第二个按钮时，效果如图8-6所示。

4