1、项目十二项目十二使用使用JavaScript设计网页特效设计网页特效任务一任务一 JavaScript入门入门【知识目标【知识目标】1.了解JavaScript2.掌握JavaScript使用方式3.掌握JavaScript基本数据结构任务一任务一 JavaScript入门入门【技能目标【技能目标】1.能够利用JavaScript，编辑页面2.能够利用JavaScript，实现页面输出信息 任务一任务一 JavaScript入门入门【项目描述【项目描述】日历是不少页面不可以缺少的组成部分，如现今流行的博客。当不同时间、不同地区的用户打开日历页面，所查看到的内容可能有所不同，HTML无法解 决
2、上 述 问 题。JavaScript的出现帮助我们解决了这个问题，当我们打开日历页面，出现的是系统当前时间的日历，并且突出显示了当前的天数；还可以通过图片按钮，实现日历翻阅的效果，如图12-1所示。图12-1 日历预览效果12.1.1 项目准备项目准备1.JavaScript简介 JavaScript是一种基于对象(Object)和事件驱动(Event-Driven)并具有安全性能的脚本语言。2.JavaScript特点n脚本语言n基于对象n简单性n安全性n动态性n跨平台性3.JavaScript代码嵌入页面JavaScript代码嵌入网页的方法与CSS相似代码如下所示：JavaScript语
3、言代码;JavaScript 语言代码;.4.JavaScript运行方式n直接运行JavaScript代码直接写入网页文档主体body标签里 n内联式运行JavaScript代码写入网页文档头head标签里，只有当被调用时才会执行 n外联式运行 JavaScript程序写入JavaScript文件中，JavaScript文件后缀为.js，只有当文档调用该JS文件时，才运行其中的JavaScript代码。5.JavaScript基础语法JavaScript是一种基于对象(Object)和事件驱动(Event-Driven)的脚本语言，其语法与C语言非常相似，但有略有不同：n弱变量类型JavaS
4、cript是一种弱类型脚本语言。所谓弱类型指的是在JavaScript中所有数据类型的变量均用var这个关键词来声明，这样一来，无法通过变量声明来识别该变量是何种数据类型，只有通过赋值方可确定。nfunction函数JavaScript对函数的定义代码如下：function 函数名(参数列表)代码段;函数调用带返回值的函数 n事件JavaScript与HTML结合，用户通过浏览器访问Web页面时，执行某个操作，触发了JavaScript程序的行为叫做事件驱动，其中执行的操作叫做事件，通常借由鼠标或者键盘进行，而触发的JavaScript程序称之为事件处理程序。JavaScript事件有很多个，
5、常用的事件有页面载入事件、页面卸载事件、单击事件、鼠标经过事件、鼠标离开事件。n对象JavaScript中的对象是由属性(properties)和方法(methods)两个基本的元素的构成的。前者是对象在实施其所需要行为的过程中，实现信息的装载单位，从而与变量相关联；后者是指对象能够按照设计者的意图而被执行，从而与特定的函数相联。常见的对象有：1.引用JavaScript内部对象（String，Date等）；2.由浏览器环境中提供（window等）3.HTML DOM对象（document等）对象的应用：关键字new来创建一个对象，并通过点号“.”获取对象的属性或方法 n字符串对象String
6、 属性length 用法：.length；返回该字符串的长度。方法indexOf()作用：从字符串对象中指定的位置搜索子字符串substring()作用：返回字符串的一部分子字符串 substr()作用：返回字符串的一部分子字符串 toLowerCase()作用：把字符串改变为小写toUpperCase()作用：把字符串改变为小写n数组对象ArrayArray对象是一个变量中存储多个值。Array对象的创建有三种方式，如下所示：var 数组名=new Array();var 数组名=new Array(数组个数);var 数组=new Array(数组成员);属性length属性：数组成员个数
7、。示例如下：方法join方法：把数组的所有元素放入一个字符串。元素通过指定的分隔符进行分隔。n数学对象MathMath对象没有构造函数Math()，因此Math对象的属性和方法直接以“Math.属性”和“Math.方法”的形式调用。方法floor方法：对一个数进行下舍入，返回小于等于这个数的最大整数。例如Math.floor(3.98)值为3。round方法：对一个数进行四舍五入，返回四舍五入的结果。例如Math.round(3.98)值为4。random方法：返回一个介于01之间随机数 n日期对象DateDate对象可以存储任意一个日期和时间，并且对日期和时间进行处理。Date对象的创建有带
8、参数和不带参数两种，如下所示：var d=new Date();var d=new Date(Y，M，D)获取日期和时间的方法 getYear():返回年数 getMonth():返回当月号数 getDate():返回当日号数 getDay():返回星期几 getHours():返回小时数 getMintes(:返回分钟数 getSeconds():返回秒数 getTime():返回毫秒数 设置日期和时间：setYear();设置年 setDate():设置当月号数 setMonth():设置当月份数 setHours():设置小时数 setMintes():设置分钟数 setSeconds(
9、):设置秒数 setTime():设置毫秒数12.1.2 项目实现项目实现1.日历页面设计2.日历功能实现n日期单元格命名n显示标题日期 n显示日期 12.1.3 项目训练项目训练制作九九乘法表。要求：1.利用JavaScript脚本语言，向页面输出一张九九乘法表，效果如图；2.标题“九九乘法表”为标题1，数字为12pt大小的白色字体；3.奇数列背景色为#009944，偶数列背景色为#0000ff。任务二任务二 下拉菜单与悬停提示下拉菜单与悬停提示【知识目标【知识目标】1.掌握对document对象的使用 任务二任务二 下拉菜单与悬停提示下拉菜单与悬停提示【技能目标【技能目标】1.结合CSS样
10、式，制作美观的二级导航栏任务二任务二 下拉菜单与悬停提示下拉菜单与悬停提示【项目描述【项目描述】本次任务通过设计Web Company公司网站首页，介绍如何利用JavaScript制作二级导航栏。利用JavaScript动态生成二级导航栏内容实现二级导航的效果。12.2.1 项目准备项目准备1.document对象文档对象是指从网页文档中划分出来的对象，document对象就是其中的一个，它描述当前窗口或者指定窗口对象的文档，包含里文档中从文档头到页面主体之间的所有内容。2.document对象属性nt i t l e 属 性：返 回 当 前 文 档 的 标 题，即 当 前 文 档标签所包含的
11、文字 3.document对象方法nwrite、writeln方法：两个方法均是向文档写入数据，所写入的内容以网页HTML文档处理。write和writeln的差别在于writeln方法在写入数据后会自动换行。ngetElementById方法：获取当前文档中指定id的对象 ngetElementsByName方法：通过name属性来获取当前文档中的对象。ngetElementsByTagName方法：获取指定标签的对象集合，12.2.2 项目实现项目实现（1）页面内容设计（2）页面样式设计（3）页面功能实现12.2.3 项目训练项目训练根据效果图，网页设计课程网站首页。要求：1.利用DIV+
12、CSS，设计页面；2.利用JavaScript，实现二级导航栏 任务三任务三 选项卡切换特效选项卡切换特效【知识目标【知识目标】1.熟练掌握对document对象的使用 任务三任务三 选项卡切换特效选项卡切换特效【技能目标【技能目标】1.结合CSS样式，实现选项卡切换效果任务三任务三 选项卡切换特效选项卡切换特效【项目描述【项目描述】选项卡可以将多个内容块重叠在一个区域显示，很多企事业单位网站首页都会选用选项卡。本节在12.2任务二基础上，为Web Company公司网站的内容区域添加选项卡，来丰富该页面的内容 12.3.1 项目实现项目实现在12.2.2的基础上，在相应的位置添加选项卡内容、
13、设计选项卡CSS样式、实现选项卡功能12.3.2 项目训练项目训练根据效果图，网页设计课程网站首页。要求：1.利用DIV+CSS，设计页面；2.利用JavaScript，实现二级导航栏在12.2.3页面的基础上，修改前言的内容。页面加载时效果如图（a）所示；当鼠标指向“进阶提高篇”选项卡时，效果如图（b）所示。ab任务四任务四 网页弹出层特效网页弹出层特效【知识目标【知识目标】1.掌握insertAdjacentHTML方法2.掌握insertAdjacentText方法【技能目标【技能目标】1.能够向指定位置动态插入网页元素2.能够向指定位置动态插入文本任务四任务四 网页弹出层特效网页弹出层
14、特效【项目描述【项目描述】弹出层是网页常用的特效之一，通过鼠标执行某种操作，弹出一个层，该层主要起到介绍、提示的作用。本任务通过在12.3任务三的基础上，添加一个介绍联系方式的层，页面加载时，隐藏层；当鼠标经过导航栏“联系我们”时，弹出层；点击层标题栏中“X”文本时，关闭层 任务四任务四 网页弹出层特效网页弹出层特效7.4.1 项目准备项目准备1.insertAdjacentHTML方法 insertAdjacentHTML方法实现Javascript向页面添加HTML内容的方法。insertAdjacentHTML方法有两个参数：待插入的位置、待插入的内容。方法使用如下所示：insertAd
15、jacentHTML(where,content)where表示指定HTML内容要插入的位置，它有四个默认值：beforeBegin：插入到对象的开始标签之前afterBegin：插入到对象的开始标签之后beforeEnd：插入到对象的结束标签之前afterEnd：插入到对象的结束标签之后content表示带插入的内容。2.insertAdjacentText方法insertAdjacentText方法与insertAdjacentHTML方法功能和使用方式基本一样，唯一的差别是，insertAdjacentText插入的是文本内容，而insertAdjacentHTML插入的是HTML内容。
16、12.4.2 项目实现项目实现在12.3.1的基础上，在相应的位置添加【联系我们】层的内容、设计层的CSS样式、实现弹出层功能12.4.3 项目训练项目训练在12.3.3网页设计课程网站首页的基础上，添加弹出层效果。要求：当鼠标移至导航栏“目录”项时，弹出层，如图所示。当单击层上关闭按钮【X】时，关闭层；当单击层上缩小按钮【-】时，最小化层。任务五任务五 跑马灯与无缝滚动特效跑马灯与无缝滚动特效【知识目标【知识目标】1.了解JavaScript中HTML元素通用属性2.掌握setInterval和setTimeout方法的使用3.掌握clearInterval和clearTimeout方法的使
17、用 任务五任务五 跑马灯与无缝滚动特效跑马灯与无缝滚动特效【技能目标【技能目标】1.能够在网页中添加跑马灯与无缝滚动特效 任务五任务五 跑马灯与无缝滚动特效跑马灯与无缝滚动特效【项目描述【项目描述】滚动效果是网页设计中一种常见的动态效果。在HTML中，标签可以实现滚动效果，但是等待一次滚动完成后，才能进行第二次等待，滚动效果不佳。本项目在12.4的基础上，为“硬件产品”选项卡下的硬件产品信息添加无缝滚动特效。12.5.1 项目准备项目准备1.HTML元素对象属性 noffsetParent属性：获取最近的动态定位的包含元素的引用，所有的便宜量都根据该元素来决定。noffsetTop属性：获取当
18、前元素的上边界到它的包含元素的上边界的偏移量，单位为像素。noffsetLeft属性：获取当前元素的左边界到它的包含元素的左边界的偏移量，单位为像素。noffsetWidth属性：获取元素的宽度，是元素实际占据的宽度，单位为像素。noffsetHeight属性：获取元素的高度，是元素实际占据的高度，单位为像素。nscrollTop属性：设置或获取位于对象最顶端和窗口中可见内容的最顶端之间的距离，单位为像素。nscrollLeft属性：设置或获取位于对象左边界和窗口中可见内容的最左端之间的距离，单位为像素。nscrollWidth属性：获取元素的滚动宽度，单位为像素。nscrollHeight属
19、性：获取元素的滚动高度，单位为像素。2.setInterval方法和clearInterval方法nsetInterval方法setInterval方法的作用有些类似一般编程语言的函数递归调用，setInterval可以每隔一段时间调用某个函数。该方法有两个参数：需要调用的函数和间隔时间。方法使用如下所示：setInterval(function，time)function为需要调用函数的函数名；time为调用的间隔时间，时间以毫秒为单位。nclearInterval方法clearInterval方法即为清除setInterval方法的调用函数操作，其使用方法如下：clearInterval(
20、clearid)其中clearid为调用setInterval方法后返回的值。3.setTimeout方法和clearTimeout方法 nsetTimeout方法setTimeout方法与setInterval方法都是实现在一个时间后调用某个函数，两者的语法也相同，有两个函数。但是这个两个方法还是略有区别。setInterval方法能够重复实现函数的调用，而setTimeout方法只执行一次调用。nclearTimeout方法清除setTimeout方法调用函数的操作由clearTimeout方法来完成，该方法的使用与clearInterval一样，根据setTimeout方法返回的值，实现调用函数操作的清除。12.5.2 项目实现项目实现在12.4.2的基础上，在相应的位置修改滚动区域的内容、设计该区域的CSS样式、实现无缝滚动功能12.5.3 项目训练项目训练12.5.2实现了水平向左的无缝滚动，在12.4.3的基础上，添加一个滚动条，实现向上翻屏滚动。所谓翻屏滚动，即每次滚动只显示一条信息。
