网页设计基础 浮动与定位 第8章 JavaScript编程基础-补充案例.docVIP

第8章 JavaScript编程基础 PAGE 2 PAGE 1 第8章补充案例 【案例8-1】 弹出一个警示框 一、案例描述 考核知识点 alert()函数 练习目标 掌握alert()函数的应用。 需求分析 在浏览网页时，经常会看到一些弹出的警示框，用于提醒用户当前的操作是否完成，例如，在电商网站中，当完成付款时，会弹出支付情况的警示框。下面，本案例将通过引入JavaScript的相关知识创建一个“支付已完成！”的警示框。 案例分析 效果如图8-1所示。 “支付已完成！”效果展示 具体实现步骤如下： 使用内嵌式引入JavaScript。 通过alert()函数输出字符串。 二、案例实现 根据上面的分析，可以通过简单的JavaScript代码来实现这一效果，具体代码如下： !DOCTYPE html PUBLIC -//W3C//DTD XHTML 1.0 Transitional//EN /TR/xhtml1/DTD/xhtml1-transitional.dtd html xmlns=/1999/xhtml xml:lang=en head meta http-equiv=Content-Type content=text/html;charset=UTF-8 title弹出一个警示框/title /head body script type=text/javascript alert(支付已完成！) /script /body /html 保存后，在火狐浏览器中预览，效果如图8-2所示。 “支付已完成！”效果展示 【案例8-2】 简短的文字描述 一、案例描述 考核知识点 变量的声明与赋值 练习目标 掌握变量声明与赋值的应用。 需求分析 网页中的文字描述是传输网页信息的重要途径，尤其是一些新闻网页，文字描述占有很大的篇幅，本案例将通过定义变量的方法引入一段文字，其中不变的内容通过字符串输出。 案例分析 效果如图8-3所示。 简短的文字描述 具体实现步骤如下： 设置body的背景色，并定义文字样式。 声明变量并进行赋值。 二、案例实现 根据上面的分析，可以通过简单的JavaScript代码来实现这一效果，具体代码如下： !DOCTYPE html PUBLIC -//W3C//DTD XHTML 1.0 Transitional//EN /TR/xhtml1/DTD/xhtml1-transitional.dtd html xmlns=/1999/xhtml xml:lang=en head meta http-equiv=Content-Type content=text/html;charset=UTF-8 title简短的文字描述/title style type=text/css body{ background: #4bceff; color:#fff; font-weight: bold; } /style /head bodyp script type=text/javascript var name; //声明变量name name=张三; //把字符串“张三”存储到变量name中 age=20; //变量age被隐式声明，并赋值整数20 document.write(name); //读取变量name的值，并将它显示在页面上 document.write(的年龄是:);//在页面上输出字符串“的年龄是：” document.write(age); //读取变量age的值，并将它显示在页面上 document.write(岁); //输出字符串“岁” /script /p/body /html 保存后，在火狐浏览器中预览，效果如图8-4所示。 “文字描述”效果展示 【案例8-3】手动跳转焦点图 一、案例描述 考核知识点 调用函数 练习目标 掌握调用函数的方法。 能够准确修改元素样式。 了解鼠标移入事件。 需求分析 在浏览一些电商站时经常会看到一些大的焦点图映入眼帘，不仅使整个网站看起来更加美观，还增加了网站的点击量。本案例将通过JavaScript调用函数的方法，制作一款手动跳转的焦点图。 案例分析 刚打开页面时，效果如图8-5所示。 手动跳转焦点图1 当鼠标移到第二个按钮时，效果如图8-6所示。 手动跳转焦点图2 具体实现步骤如下： 图片由img标记定义，按钮由无序列表ul定义，外部嵌套的大盒子由div定义。 控制大盒子的宽高和外边距，并对大盒子设置相对定位。 对ul标记设置绝对定位。 定义li左浮动，