1、HTML5+CSS3+JavaScript网页设计与制作项目教程项目7 JavaScript应用实现网页交互功能 目录E N T E R P R I S E O P E R A T I O N R E P O R T04.总结提升03.知识链接02.学习目标01.项目导入05.扩展训练PART 01项目导入使用使用JavaScript制作制作“旅行家旅行家-图片轮播图片轮播”效果效果JavaScript是Web页面中的一种脚本语言，常用来为网页添加各式各样的动态功能，为用户提供更流畅美观的浏览效果。本章我们将使用JavaScript制作“旅行家轮播图”模块，案例完成效果如图7.1所示。PART
2、 0202知 识 目 标能 力 目 标1、理解JavaScript的基本概念及在网页中的主要作用2、掌握JavaScript的引入方法及基本语法3、理解并掌握JavaScript对象的使用方法4、掌握JavaScript的事件处理方法1、会用JavaScript实现简单的网页交互功能2、会用JavaScript实现图片轮播效果02PART 0303一、JavaScript简介1、什么是JavaScriptJavaScript是一种逐行执行的脚本语言，常用来为网页添加各式各样的动态功能，为用户提供更流畅美观的浏览效果。除了JavaScript，网页相关前端技术还包括Ajax（实现浏览器与服务器异
3、步交互）及Node.js（在服务器端使用的JavaScript代码）等。JavaScript在网页中的用处很多，它可以对事件做出响应，可以将JavaScript设置为当某事件发生时才被执行。例如：03一、JavaScript简介（1）页面载入完成或者用户单击某个HTML元素时发生相应的动作，如图7.2所示的“TAB栏切换”，当用户将鼠标分别移上“生活”、“VR”、“河南”等时，对应的内容将会切换。03一、JavaScript简介（2）JavaScript可以读写HTML元素，在数据被提交到服务器之前，JavaScript还可被用来验证这些数据，如7.3所示的注册页面。03一、JavaScrip
4、t简介（3）JavaScript可被用来检测访问者的浏览器，并根据所检测到的浏览器，为这个浏览器载入相应的页面。（4）JavaScript可被用来创建cookies，还可被用来存储和取回位于访问者计算机中的信息等。032、JavaScript的特点 JavaScript是一种描述性语言，也是一种基于对象（Object）和事件驱动（Event Driven）的，并具有安全性的脚本语言。最初由网景（现在的Mozilla）公司创建。主要有以下特点：解释性：JavaScript是一种解释性语言。由浏览器解释并执行代码，不进行预编译。基于对象：JavaScript是一种基于对象的脚本语言,它不仅可以创建
5、对象,也能使用现有的对象，语法和Java类似。动态性：JavaScript一般用来编写客户端的脚本，它不需要经过Web服务器就可以对用户的输入做出响应。在访问一个网页时,鼠标在网页中进行鼠标点击或上下移、窗口移动等操作JavaScript都可直接对这些事件给出相应的响应。跨平台性：JavaScript脚本语言不依赖于操作系统，在绝大多数浏览器的支持下，可以在多种平台下运行（如Windows、Linux、Mac、Android、iOS等）。一、JavaScript简介033、JavaScript的组成JavaScript主要有三大组成部分，说明如下。(1)ECMAScript：JavaScrip
6、t的核心，描述了语言的基本语法(var、for、if、array等)和数据类型(数字、字符串、布尔、函数、对象(obj、null)、未定义)。(2)浏览器对象模型（BOM）对浏览器窗口进行访问和操作。例如弹出新的浏览器窗口，移动、改变和关闭浏览器窗口，提供详细的网络浏览器信息（navigator object），详细的页面信息（location object），详细的用户屏幕分辨率的信息（screen object），对cookies的支持等等。BOM作为JavaScript的一部分并没有相关标准的支持，每一个浏览器都有自己的实现，虽然有一些非事实的标准，但还是给开发者带来一定的麻烦。一、Ja
7、vaScript简介03(3)文档对象模型（DOM）：DOM（文档对象模型）是 HTML 和 XML 的应用程序接口（API）。DOM 将把整个页面规划成由节点层级构成的文档。HTML 或 XML 页面的每个部分都是一个节点的衍生物。如下面的 HTML 页面：一、JavaScript简介 Sample Page hello world!03 DOM 通过创建树来表示文档，从而使开发者对文档的内容和结构具有空前的控制力。用 DOM API可以轻松地删除、添加和替换节点（getElementById、childNodes、appendChild、innerHTML）。上段代码可以用DOM绘制如图7
8、.4所示的节点层次图。一、JavaScript简介034、JavaScript执行原理（1）浏览器客户端向服务器端发送请求。(即用户在浏览器地址栏中输入地址)（2）数据处理：服务器端将某个包含JavaScript的页面进行处理。（3）发送响应：服务器端将含有JavaScript的HTML文件进行处理页面发送到浏览器客户端，然 后由浏览器客户端从上直下逐条解析HTML标签和JavaScript标签，将页面效果呈给用户。一、JavaScript简介03二、JavaScript基本语法1、JavaScript引入方式通常JavaScript脚本是通过嵌入在HTML中来实现自身的功能的。在 HTML文
9、档中引入JavaScript有三种方式，具体如下：（1）嵌入式：将代码直接写在HTML文档中。通过标签及其相关属性可以引入JavaScript代码。当浏览器读取到标签时，就解释执行其中的脚本。具体语法如下：/HTML5中默认脚本类型为JavaScript，编写时可省略type属性/JavaScript代码03二、JavaScript基本语法（2）外链式：创建.js文件，使用src属性引入文件。当脚本代码比较复杂或者同一段代码需要被多个网页文件使用时，可以将这些脚本代码放置在一个扩展名为.js的文件中，然后通过外链式引入该js文件。具体语法如下：注意：使用嵌入式或外链式时，JavaScript代
10、码可以放在HTML文档的head标签内，也可放在body标签中，元素标签后。JavaScript代码放在不同的位置会影响程序的运行顺序。（3）行内式：使用html标记中href属性或通过事件引入/通过href属性引入/通过事件引入03【例7-1】引入JavaScript代码步骤一：定义HTML文档 引入JavaScript 欢迎 /使用document.write()方法，在页面中输出文字 document.write(JavaScript学习第一课);步骤二：定义js文档function hello()alert(欢迎学习JavaScript！);运行例7-1，得到如图7.5所示效果。点击欢
11、迎按钮，调用js文件中定义的响应函数hello(),弹出警示框，如图7.6所示。03二、JavaScript基本语法2、JavaScript基本语法（1）常用输出语句JavaScript常用输出语句如下所示：window.alert()：写入警示框 document.write()：写入 HTML 输出 console.log()：写入浏览器控制台（2）注释 JavaScript注释语句语法格式如下所示：/单行注释/*多行注释*/03二、JavaScript基本语法（3）数据类型 JavaScript的数据类型，根据存储方式不同可分为值类型和引用类型：值类型：值类型数据直接存储在堆中，变量存储
12、的是简单的数据段，存储的是具体的值，是轻量级的数据存储方式。包括整型、浮点型、布尔型等。引用类型：引用类型的变量，存储的是对象引用地址。将数据的存储位置存储在堆中，讲具体数据存储在栈中。包括数组、对象等。03二、JavaScript基本语法（4）变量与常量的声明 在JavaScript中声明变量和常量，主要是用一下语句：var：声明变量 let：声明仅在块级作用范围内有效的变量，如if循环中的迭代条件。const：声明常量（5）运算符 JavaScript中常用的运算符如表所示：数学运算符：+、-、*、/、%、+、-连接运算符：+字符串：使用单引号或双引号 比较运算符：、=、=、!=、=（绝对
13、等于：值和类型均相等：）03二、JavaScript基本语法（6）流程控制语句在JavaScript中，程序流程控制可分为顺序结构、分支结构及循环结构：顺序结构：标准的从上往下执行的顺序。分支结构：分支结构也称选择结构，通过对给定的条件进行判断，从而决定执行两个或多个分支中的哪一支。主要包括：if语句、switch语句。循环结构：根据判断条件的结果选择是否重复执行某段代码的结构。主要包括：for语句、while语句。在流程控制语句中，我们还经常break语句及continue语句，用来实现程序跳转。其中break语句表示跳出当前分支或循环；continue表示跳出当次分支或循环，进入下一次循环
14、。03二、JavaScript基本语法（7）函数函数用于封装一段完成特定功能的代码。用户在使用时只需关注参数及返回值，就能完成特定功能。JavaScript中定义函数的语法格式如下：function 函数名（形参1，形参2，）函数体；return 返回值；其中：形参：定义函数时使用的参数 实参：调用函数式传入的参数 返回值：函数的返回值，不定义时返回值为undefined03【例】7-2 数组嵌套实现三级联动 省份城市的三级联动 请选择 /省份数组 var provinceArr=上海市,江苏省,河南省;/城市数组 var cityArr=上海市,苏州市,南京市,扬州市,郑州市,洛阳市,新乡市
15、,南阳市 ;/区域数组 var countryArr=徐汇区,浦东区,静安区,黄浦区,长宁区,虎丘区,吴中区,相城区,姑苏区,吴江区,玄武区,秦淮区,鼓楼区,浦口区,广陵区,江都区,二七区,金水区,中原区,郑东新区,管城区,中牟市,新郑市,涧西区,老城区,西工区,卫滨区,红旗区,凤泉区,宛城区,卧龙区 ;/第1步 function createOption(obj,data)for(var i in data)var op=new Option(datai,i);/创建下拉列表中的option选项 obj.options.add(op);/将选项添加到下拉列表中 var province=do
16、cument.getElementById(province);createOption(province,provinceArr);03/第2步 var city=document.getElementById(city);province.onchange=function()city.options.length=0;/清空city下的原有 createOption(city,cityArrprovince.value);if(province.value=0)city.onchange();/自动添加 城市对应区域 下拉列表 else country.options.length=0;
17、/清空country下的原有 ;/第3步 var country=document.getElementById(country);city.onchange=function()country.options.length=0;/清空country下的所有原有 createOption(country,countryArrprovince.valuecity.value);03二、JavaScript基本语法（8）JavaScript对象JavaScript是基于对象的脚本语言，在JavaScript中，所有类都是基类Object类的子类。定义和使用类的基本语法如下：/定义类function
18、 类名(参数)/初始化类的属性 this.属性名=属性值;/初始化类的方法 function 方法名(参数)/方法体 /类的实例化var 对象名=new 类名(参数);/获取类的属性对象名.属性名/调用类的方法对象名.方法名(参数)JavaScript中提供了大量的内置对象供用户使用，具体如下：Array：数组类 Date：日期类 Error：错误类 Function：函数类 Math：数学类，该对象包含相当多的执行数学运算的方法 Number：数值类 Object：对象类 String：字符串类03【例7-3】使用日期类 获取当前时间 var today=new Date();documen
19、t.write(现在是：+today.getFullYear()+年+(today.getMonth()+1)+月+today.getDate()+日);document.write(本地时间格式：+today.toLocaleString()+);document.write(格林尼治标准时间：+today.toGMTString()+);03三、DOM对象 DOM（Document Object Model，文档对象模型）用于完成HTML和XML文档的操作，对所有元素进行获取、访问、标签属性和样式的设置。在JavaScript中利用DOM操作HTML元素和CSS样式。1、DOM节点树 DO
20、M节点树主要包括以下元素：DOM HTML：DOM中为操作HTML文档提供的属性和方法 element：HTML中的标签元素 node：节点，文档中所有内容。节点分为标签节点、文本节点、属性节点，其中标签节点又被称为元素节点，文档中的注释称为注释节点。03三、DOM对象DOM将网页中文档的对象关系规划为节点层级，构成它们之间的等级关系，这种各对象间的层次结构被称为节点树。如图7.9所示就是一个DOM树。图7.9 文档与对应的层次结构图03三、DOM对象一个文档的树形结构就是由各种不同的节点组成的。文档对象节点树有以下特点：每个节点树有一个根节点。除了根节点，每个节点都有一个父节点。每个节点都可
21、以有许多的子节点。具有相同父节点的节点叫做“兄弟节点”。通过对象模型，JavaScript 可以对节点元素实现如下操作：改变页面中的所有 HTML 元素内容 改变页面中的所有 HTML 属性 改变页面中的所有 CSS 样式 删除已有的 HTML 元素和属性 添加新的 HTML 元素和属性 对页面中所有已有的 HTML 事件作出反应 在页面中创建新的 HTML 事件03三、DOM对象2、节点的访问（1）访问指定元素一个元素对象可以拥有元素节点、文本节点、子节点或其它类型的节点。访问指定节点的常用方法如表7.1所示。表7.1访问节点的方法方法说明getElementById(id)获取拥有指定id
22、的第一个元素对象的引用getElementsByName(name)获取带有指定名称的元素对象集合getElementsByTagName(name)获取带有指定标签名的元素对象集合getElementsByClassName(name)获取指定类名的元素对象集合03三、DOM对象（2）访问相关元素引用完成一个页面元素对象后，可以使用DOM节点对象的parentNode、childNodes、firstChild、lastChild、previousSibling或nextSibling属性访问相对于该页面元素的父、子或兄弟元素。具体如表7.11所示。表7.2访问节点的方法属性说明parent
23、Node元素节点的父节点childNodes元素节点的子节点数组firstChild第一个子节点lastChild最后一个子节点previousSibling前一个兄弟节点nextSibling后一个兄弟节点03三、DOM对象3、元素对象常用操作由于HTML DOM将HTML文档表示为一颗DOM树，每个节点对象表示文档的特定部分，因此通过修改这些对象，就可以动态改变页面元素的属性。关于元素对象的常用操作如表7.3所示。document.createElement()是在对象中创建一个对象，要与appendChild()或insertBefore()方法联合使用。其中，appendChild()
24、方法在节点的子节点列表末添加新的子节点。insertBefore()方法在节点的子节点列表任意位置插入新的节点。表7.3修改页面元素的方法方法说明createElement()创建元素节点createTextNode()创建文本节点appendChild()为当前节点增加一个子节点（作为最后一个子节点）insertBefore()为当前节点增加一个子节点（插入到指定子节点之前）removeChild()删除当前节点的某个子节点03三、DOM对象4、元素属性与内容操作除了可以对元素进行添加删除等操作，还可以对元素的属性和内容进行修改，具体方法如表7.4所示。表7.4元素属性及属性操作类型属性/方
25、法说明元素内容innerHTML获取或设置元素的HTML内容样式属性className获取或设置元素的class属性style获取或设置元素的style样式属性位置属性offsetWidth、offsetHeight获取或设置元素的宽和高（不含滚动条）scrollWidth、scrollHeight获取或设置元素的完整的宽和高（含滚动条）offsetTop、offsetLeft获取或设置包含滚动条，距离上或左边滚动过的距离scrollTop、scrollLeft获取或设置元素在网页中的坐标属性操作getAttribute()获得元素指定属性的值setAttribute()为元素设置新的属性re
26、moveAttribute()为元素删除指定的属性03三、DOM对象5、元素样式操作style属性可以修改元素的样式，className属性可以修改元素的类名。（1）style属性每个元素对象都有一个style属性，常用style属性如表7.5所示。使用这个属性可以动态调整元素的内嵌样式，从而获得所需要的效果。名称说明background设置或返回元素的背景属性backgroundColor设置或返回元素的背景色display设置或返回元素的显示类型height设置或返回元素的高度left设置或返回定位元素的左部位置listStyleType设置或返回列表项标记的类型overflow设置或返回
27、如何处理呈现在元素框外面的内容textAlign设置或返回文本的水平对齐方式textDecoration设置或返回文本的修饰textIndent设置或返回文本第一行的缩进transform向元素应用2D或3D转换03（2）className属性元素对象的className属性用于切换元素的类名，或为元素追加类名。例【7-4】操作DOM节点 添加节点 node1 node2 添加节点 function addnode()var child=document.createElement(p);var father=document.getElementById(father);child.inne
28、rHTML=This is a test;child.style.color=red father.appendChild(child);案例完成后，打开页面，点击“添加节点”按钮，就会在按钮下方添加段落节点，如图7.9所示：03四、BOM对象 BOM（Browser Object Model）是浏览器对象模型，它提供了一系列对象用于与浏览器窗口进行交互。BOM对象包括window（窗口）、navigator（浏览器程序）、screen（屏幕）、location（地址）、history（历史）和document（文档）等对象。其中，window对象是浏览器的窗口，它是整个BOM的核心，位于BO
29、M对象的最顶层。关于BOM对象的层次结构如图7.10所示。图7.10 BOM对象的层次结构图03四、BOM对象window子对象包括：document（文档对象）：DOM对象，是HTML页面当前窗体的内容。frame（框架对象）：包含了框架的版面布局信息，以及每一个框架所对应的窗口对象。history（历史对象）：主要用于记录浏览器的访问历史记录，也就是浏览网页的前进与后退功能。location（地址栏对象）：用于获取当前浏览器中URL地址栏内的相关数据。navigator（浏览器对象）：用于获取浏览器的相关数据，如浏览器的名称、版本，也称为浏览器的嗅探器。screen（屏幕对象）：可获取与屏
30、幕相关的数据，例如屏幕的分辨率等。031、window对象window对象表示整个浏览器窗口，用于获取浏览器窗口的大小、位置，或设置定时器等。window对象常用的属性和方法如表7.6所示。表7.6 window对象常用的属性和方法属性/方法说明Document、history、location、navigator、screen返回相应对象的引用。例如document属性返回document对象的引用。parent、self、top分别返回父窗口、当前窗口和最顶层窗口的对象引用。screenLeft、screenTop、screenX、screenY返回窗口的左上角、在屏幕上的X、Y坐标。Fi
31、refox不支持screenLeft、screenTop，IE8及更早的IE版本不支持screenX、screenY。innerWidth、innerHeight分别返回窗口文档显示区域的宽度和高度。outerWidth、outerHeight分别返回窗口的外部宽度和高度。closed返回当前窗口是否已被关闭的布尔值。opener返回对创建此窗口的窗口引用。open()、close()打开或关闭浏览器窗口。alert()、confirm()、prompt()分别表示弹出警告框、确认框、用户输入框。moveBy()、moveTo()以窗口左上角为基准移动窗口，moveBy()是按偏移量移动，mo
32、veTo()是移动到指定的屏幕坐标。scrollBy()、scrollTo()scrollBy()是按偏移量滚动内容，scrollTo()是滚动到指定的坐标。setTimeout()、clearTimeout()设置或清除普通定时器。setInterval()、clearInterval()设置或清除周期定时器。注意：window对象是最顶层对象，调用他的属性和方法时，可以省去window，例如使用alert()弹出一个警告提示框，完整的写法应该是window.alert()，即调用window对象的alert()方法。03四、BOM对象2、document对象document对象用于处理网页
33、文档，通过该对象可以访问文档中所有的元素。下面列举document对象常用的属性和方法，如表7.7所示。表7.7 document对象常用的属性和方法属性/方法说明body访问元素。lastModified获得文档最后修改的日期和时间。referrer获得该文档的来路URL地址，当文档通过超链接被访问时有效。title获得当前文档的标题。write()向文档写HTML或JavaScript代码。03四、BOM对象3、location对象location对象用于获取和设置当前网页的URL地址，其常用的属性和方法如表7.8所示。表7.8 location对象常用的属性和方法属性/方法说明hash获
34、取或设置URL中的锚点，例如“#top”。host获取或设置URL中的主机名，例如“”。port获取或设置URL中的端口号，例如“80”。href获取或设置整个URL，例如“http:/ history对象常用的属性和方法属性/方法说明back()加载历史记录中的前一个URL（相当于后退）。forward()加载历史记录中的后一个URL（相当于前进）。go()加载历史记录中的某个页面。03四、BOM对象5、screen对象 screen对象用于获取用户计算机的屏幕信息，例如屏幕分辨率、颜色位数等。screen对象的常用属性如表7.9所示。表7.9 screen对象常用的属性和方法属性说明wid
35、th、height屏幕的宽度和高度availWidth、availHeight屏幕的可用宽度和可用高度（不包括Windows任务栏）colorDepth屏幕的颜色位数03【例7-5】定时跳转页面 定时跳转页面 5秒之后，自动跳转百度首页 var second=5;function showtime()second-;/判断时间，如果second=0，则跳转 if(second=0)location.href=https:/;var time=document.getElementById(time);time.innerHTML=second+;/设置定时器 setInterval(showt
36、ime,1000);项目完成效果如图所示，页面中倒计时5秒后自动跳转到百度首页03五、事件事件是交互的桥梁，用户可以通过多种方式与浏览器载入的页面进行交互。Web应用程序开发者通过JavaScript脚本内置的和自定义的事件来响应用户的动作，就可以开发出更有交互性、动态性的页面。最常见的JavaScript事件有：鼠标交互事件 键盘事件 表单事件03五、事件1、JavaScript事件与事件处理采用事件驱动是JavaScript语言的一个最基本特征，所谓的事件是指用户在访问页面时执行的操作。事件处理指的就是与事件关联的JavaScript对象，当与页面特定部分关联的事件发生时，事件处理器就会被
37、调用。事件处理的过程通常分为三步，具体如下：发生事件 启动事件处理程序 事件处理程序作出反应03五、事件在使用事件处理程序对页面进行操作时，关键在于如何通过对象的事件来调用事件处理程序。在JavaScript中，调用事件处理程序的方法有两种，具体如下：在JavaScript中调用事件处理程序在JavaScript中调用事件处理程序，首先需要获得处理对象的引用，然后将要执行的处理函数赋值给对应的事件。在HTML中调用事件处理程序只需要在HTML标记中添加相应的事件，并在其中执行要执行的代码或函数名即可。2、事件对象在JavaScript中，当发生事件时，都会产生一个事件对象event。这个对象包
38、括所有与事件相关的信息，包括DOM元素、事件类型及特定时间相关的信息。03五、事件3、事件分类 根据监听的对象不同，常见的事件可以分为页面事件、鼠标事件、表单事件、键盘事件等，具体如下：（1）页面事件页面事件是指通过页面触发的事件，常用的页面事件如表7.10所示。表7.10 页面事件类别事件事件说明页面事件 onload 当页面加载完成时触发此事件 onunload 当页面卸载时触发此事件03五、事件（2）鼠标事件鼠标事件是指通过鼠标动作触发的事件，鼠标事件有很多，下面列举几个常用的鼠标事件，如表7.11所示。表7.11 鼠标事件类别事件事件说明鼠标事件 onclick 鼠标单击时触发此事件
39、ondblclick 鼠标双击时触发此事件 onmousedown 鼠标按下时触发此事件 onmouseup 鼠标弹起时触发的事件 onmouseover 鼠标移动到某个设置了此事件的元素上时触发此事件 onmousemove 鼠标移动时触发此事件 onmouseout 鼠标从某个设置了此事件的元素上离开时触发此事件03五、事件（3）表单事件表单事件是指通过表单触发的事件。例如在用户注册的表单中可以通过表单事件完成用户名合法性检查、唯一性检查、用户密码合法性检查等等。下面列举几个常用的表单事件，如表7.12所示。表7.12 表单事件类别事件事件说明表单事件 onblur 当前元素失去焦点时触发
40、此事件 onchange 当前元素失去焦点并且元素内容发生改变时触发此事件 onfocus 当某个元素获得焦点时触发此事件 onreset 当表单被重置时触发此事件 onsubmit 当表单被提交时触发此事件03五、事件（4）键盘事件 键盘事件是指通过键盘动作触发的事件，常用于检查用户向页面输入的内容。下面列举几个常用的键盘事件，如表7.13所示。表7.13 键盘事件类别事件事件说明键盘事件onkeydown 当键盘上的某个按键被按下时触发此事件onkeyup 当键盘上的某个按键被按下后弹起时触发此事件onkeypress 当输入有效的字符按键时触发此事件03【例7-6】表单验证：编写HTML
41、代码 表单验证 增加管理员 姓名：*510个字符以内的字母、数字和下划线组合 密码：*密码为6位数字 保存 重置 03【例7-6】表单验证：编写CSS代码 td span color:red;/*默认状态*/td div display:none;/*获得焦点是的状态*/.tips_info display:block;/*验证失败*/.tips_error display:block;color:red;padding-left:20px;background:url(err.png)no-repeat left center;/*验证成功*/.tips_success display:bl
42、ock;padding-left:20px;background:url(ok.png)no-repeat left center;width:0px;height:20px;overflow:hidden;03【例7-6】表单验证：编写JavaScript代码 var form=document.forms0;/查找触发事件的元素var textName=form.username;var txtPwd=form.pwd;/定义两个正则表达式var namereg=/w5,10$/;var pwdreg=/d6$/;/绑定事件处理函数：获得焦点，失去焦点/获得焦点 显示提示信息 修改 cla
43、ss 为 tips_infotextName.onfocus=getFocus;/不要加小括号！txtPwd.onfocus=getFocus;/获得焦点function getFocus()this.parentElement.nextElementSibling.firstElementChild.className=tips_info;/失去焦点 验证格式textName.onblur=function()verift(this,namereg);txtPwd.onblur=function()/传参 verift(this,pwdreg);/失去焦点验证function verift(
44、input,reg)/拿到用户输入内容 var div=input.parentElement.nextElementSibling.firstElementChild;/验证 输入是否匹配 reg.test()if(reg.test(input.value)/如果匹配，显示成功 修改class 为 tips_success div.className=tips_success;return true;else /如果不匹配 显示错误 修改 class 为 tips_error div.className=tips_error;return false;var btn=form.btn;btn
45、.onclick=function()/验证文本框 var rn=verift(textName,namereg);var rp=verift(txtPwd,pwdreg);/判断 if(rn&rp)form.submit();03案例完成效果如图7.12所示，当填写表单时，将会对表单输入进行验证，不符合验证条件时，将会进行错误提示。03【项目实施】使用【项目实施】使用JavascriptJavascript制作制作“旅行家旅行家图片轮播图片轮播”效果效果任务一：布局页面任务一：布局页面1.创建HTML文件、CSS文件及JavaScript文件，并关联文件。2.项目布局结构：轮播图容器loop
46、box中包含3个部分：轮播图图片、箭头切换按钮以及圆点切换按钮。具体代码如下：03丹霞地貌轮播图 12345注意：轮播的只有5张图片，这里布局了6张图，第六张图片与第1张图片相同，这是为了实现无缝轮播。圆点切换按钮有5个，即我们可以实时看到轮播图目前所处的位置。箭头按钮有2个，可以通过它来控制前进与后退。03任务二：任务二：CSSCSS布局布局根据整体布局，分别对整体及4个部分添加样式代码如下：1.整体样式。/*整体样式设置*/*margin:0;padding:0;ul,li list-style:none;03任务二：任务二：CSSCSS布局布局2.轮播容器样式我们为了让图片容纳在loop
47、box中，需要限定其宽度和高度并且将overflow属性设置为hidden，将其余的图片隐藏起来。同时，loopbox是静止的，轮播图片时轮播图片容器imglist相对于loopbox左右移动，因此将其position属性设置为relative，具体代码如下：/*轮播容器样式*/.loopbox width:1200px;height:550px;border:1px solid darkgray;margin:40px auto;position:relative;overflow:hidden;03任务二：任务二：CSSCSS布局布局3.轮播图片样式轮播图容器imglist中布局了轮播图片
48、，在此对容器和图片样式分别进行设置。(1)轮播图容器imglist样式设置imglist的定位方式为相对定位，这样就可以通过控制Left和Right两个箭头来控制图片的移动了。由于布局了6张轮播图片，所以将imglist的width设置为600%，只需让图片左浮动即可实现占满一排了。/*轮播图容器样式*/.loopbox.imglist width:600%;height:100%;position:absolute;.loopbox.imglist li width:1200px;height:100%;float:left;03任务二：任务二：CSSCSS布局布局(2)轮播图片样式把图片f
49、loat属性设置为left，并限定其大小，具体代码如下所示：/*轮播图片样式*/.loopbox.imglist li img width:100%;height:100%;03任务二：任务二：CSSCSS布局布局4.箭头切换按钮样式设置箭头切换按钮样式，具体代码如下：/*箭头按钮样式*/.left,.right width:50px;height:50px;position:absolute;opacity:0.5;.left:hover,.right:hover opacity:1;.left left:20px;top:250px;.right right:20px;top:250px;
50、03任务二：任务二：CSSCSS布局布局5.圆点切换按钮样式（1）把显示次序的圆点按钮放在图片的右下角。（2）设置li标记的样式，及其激活状态下样式，具体代码如下：/*圆点按钮样式*/.dots position:absolute;bottom:20px;right:150px;.dots li width:20px;height:20px;line-height:20px;background-color:rosybrown;border-radius:50%;float:left;margin-left:20px;text-align:center;font-size:12px;color
