Web前端开发（JavaScript）课件 项目3、4　制作电影资讯页面、制作政务平台系统首页

项目三制作电影资讯页面107108任务1开发“上映倒计时”功能任务2自定义视频播放器任务3开发评论发表和删除功能开发“上映倒计时”功能任务11091. 理解对象的概念，能够使用不同的方法创建对象。2. 能正确创建并使用Date对象。3. 理解setTimeout( )和setInterval( )两种定时器的区别和用法，能根据开发需求选择正确的定时器。110本任务主要内容是使用Date对象计算当前系统时间距离影片上映时间的总秒数，并按照页面显示要求对数据进行格式转换，再使用setInterval()定时器每秒更新数据，实现“上映倒计时”功能。“上映倒计时”模块的静态页面显示效果如图所示。111“上映倒计时”模块的静态页面显示效果一、对象在JavaScript中，对象是一组无序的相关属性和方法的集合，所有的事物都是对象，如字符串、数值、数组和函数等。对象是带有属性和方法的特殊数据类型，属性指对象的特征，可以看作对象中保存的数据；方法指对象的行为，可以看作对象中保存的函数。112JavaScript中常用的创建对象的方式有三种，分别是利用字面量创建对象、利用构造函数创建对象和利用Object()函数创建对象。1.利用字面量创建对象利用字面量创建对象的语法格式如下。在上述语法格式中，nameN表示对象成员的名称，valueN表示对象成员的值，多个对象成员之间用“,”隔开。113在完成对象的创建后，可以使用以下几种方式获取对象的属性。（1）使用点操作符“.”来获取对象的属性，具体示例代码如下。（2）使用方括号操作符“[]”来获取对象的属性，具体示例代码如下。当对象不需要成员时，可以声明一个空对象。创建一个空对象的示例代码如下。1142.利用构造函数创建对象在JavaScript中，使用new关键字来调用的函数被称为构造函数。构造函数可以将一些具有相同特征（属性）和行为（方法）的对象封装起来，提高代码的利用率，便于后期代码的优化和维护。定义构造函数的语法格式如下。115定义构造函数后，使用构造函数创建对象的语法格式如下。3.利用Object()函数创建对象在JavaScript中，对象的构造函数为Object()，使用Object()创建对象的语法格式如下。116二、Date对象Date对象又称日期对象，用于处理日期和时间。1.Date对象的创建直接使用Date()构造函数创建Date对象的语法格式如下。在上述代码中，当构造函数不传入参数时，表示使用系统的当前时间；当传入的参数是一个整数值时，表示自1970年1月1日00:00:00以来的毫秒数，即时间戳。当传入的参数是表示

日期的字符串时，最少需要指定年份；当传入的参数是以数字表示的年（y）、月（m）、日（d）、时（h）、分（m）、秒（s）时，最少需要指定年、月两个参数。117不同参数的示例代码如下。1182.Date对象的使用创建Date对象后，可以通过调用Date对象的相关方法实现日期、时间的格式显示。Date对象的常用方法有获取日期和时间、设置日期和时间、格式化日期等，见下表。119Date对象的常用方法

设置日期和时间的方法与获取日期和时间的基本一致，只是将get改为set。注意：没有setDay()这种方法，因为星期不需要自行设置，系统会根据设置的日期自主判断。120Date对象的常用方法

三、定时器window对象提供了以下两种方法来实现定时器的效果。（1）setTimeout()：在指定时间后执行代码（延迟执行）。（2）setInterval()：每隔一段时间执行代码（间隔执行）。1211.setTimeout()定时器setTimeout()方法用于设置一个定时器，该定时器在其到期后执行调用函数，语法格式如下。在上述代码中，需要注意以下几点。（1）“window”可以省略。（2）调用函数时可以直接写函数、函数名，以及字符串“函数名()”三种形式。（3）延迟的毫秒数的默认值是0，可省略。1222.setInterval()定时器setInterval()方法用于重复调用一个函数，每隔指定的时间，调用一次函数，语法格式如下。3.清除定时器setTimeout()和setInterval()方法的返回值为定时器id（定时器的唯一标识），将定时器id作为参数传给clearTimeout()或clearInterval()方法可以清除定时器。定时器一旦被清除，则不再被执行。123自定义视频播放器任务21241. 能使用video对象的属性和方法，完成视频播放器常见功能的开发。2. 能正确获取元素的大小和鼠标指针位置。125本任务主要内容是使用CSS样式自定义视频播放器的样式，实现视频播放器的常见功能，包括视频播放和暂停、静音和取消静音、全屏展示和退出全屏、显示视频播放总时长，以及更新视频播放时间等。该视频播放器的CSS样式显示效果如图所示。126视频播放器的CSS样式显示效果一、video对象video对象是HTML5中新增的对象，用于在HTML页面中嵌入视频元素。video对象常用的属性见下表。127video对象常用的属性

128video对象常用的属性

video对象常用的方法见下表。129video对象常用的方法二、元素的获取操作1.获取元素的大小在JavaScript中，可以通过下表中的方法获取元素的大小（尺寸）。130

获取元素大小（尺寸）的方法2.获取鼠标指针的位置通过事件对象的鼠标位置属性可以获取鼠标指针的位置信息。常用的获取鼠标指针位置的方法见下表。131常用的获取鼠标指针位置的方法

开发评论发表和删除功能任务31321. 理解节点的属性和层级关系。2. 能正确操作节点的获取、创建、添加和移除。3. 能正确操作textarea文本框的文本内容。133本任务的主要内容是通过节点的添加和移除操作，实现评论的发表和删除功能。用户可以在“发表短评”栏目输入评论，由程序同步更新输入文字的个数。若用户输入的评论字数超过200字，则弹窗提示“输入字数已达上限”；若用户输入的评论为空，则弹窗提示“请输入评论”。“发表短评”栏目的初始效果如图所示。134“发表短评”栏目的初始效果用户在输入评论后，单击“我要写短评”按钮，该条评论就会显示在“电影短评”栏目中评论列表的最下方。若用户要删除某条评论，则单击该条评论右上角的删除按钮即可。“电影短评”栏目的初始效果如图所示。135“电影短评”栏目的初始效果一、节点的获取只有清晰地知道节点之间的层次关系，才能正确地使用节点的层次关系来获取节点。在JavaScript中常用的节点的层次关系获取方法见下表。136常用的节点的层次关系获取方法二、节点的创建在实际开发过程中，创建元素节点的方法使用频繁，其语法格式如下。注意，通过createElement()方法创建的元素并不属于document对象，它只是被创建出来，并未被添加到HTML文档中，需要调用特定的方法才能将其添加到HTML文档中。137三、节点的添加成功创建节点后，一般都需要根据开发需求将节点添加到HTML文档的指定位置。DOM提供了常用的添加节点的方法，见下表。138

常用的添加节点的方法四、节点的移除removeChild()方法用于删除指定的子节点并返回子节点，语法格式如下。以上方法应由被删节点的父节点调用，删除的是父节点里面的子节点。remove()方法用于删除HTML元素，包括元素的子节点和属性，语法格式如下。上述代码表示删除element元素，注意该方法没有参数。139项目四制作政务平台系统首页140141任务1制作“通知公告”模块任务2制作“热点关注”模块任务3制作“欢迎登录”页面制作“通知公告”模块任务11421. 理解forEach语句与for...in语句的区别。2. 掌握forEach语句的语法，能使用forEach语句实现数组遍历。3. 掌握for...in语句的语法，能使用for...in语句实现对象遍历。143本任务的内容主要是使用对象数组储存从后端请求获取的模拟新闻数据，再利用forEach语句和for...in语句循环数组，将得出的数据写入到“通知公告”模块的内容列表中，实现动态渲染页面的效果，方便后期网站管理员动态更新新闻消息。144一、forEach语句forEach语句是for语句的一种特殊简化版本，一般用于遍历数组，具体语法格式如下。在上述语法格式中，array代表需要遍历的数组。forEach()方法会对array数组的每个元素执行一次提供的函数，因此forEach()方法遍历数组循环的次数等于该数组的长度。145forEach()方法调用的函数function中有3个参数，第一个参数item是必需项，表示遍历的当前元素；第二个参数是可选项，表示当前元素的索引值；第三个参数是可选项，表示当前元素所属的数组对象。forEach()方法是不会对空数组执行回调函数的。146forEach语句与for语句虽然同样可用于遍历数组，但在实际应用中有如下区别。（1）for循环可以使用break跳出循环，但forEach语句不能。（2）for循环可以控制循环起点，forEach语句的索引只能默认从0开始。（3）for循环支持在过程中修改索引，而forEach语句不支持（因为底层控制index自增，无法通过程序改变它）。147二、for...in语句for...in语句是一种特殊类型的循环，一般用于循环遍历对象的属性，语法格式如下。在上述语法格式中，key是遍历对象的属性名称，object是要遍历的对象。148【例4-1-2】已定义一个人物对象person，其包含name、sex和age共3个属性，要求遍历该对象并将其所有属性和对应的属性值打印到控制台中。参考代码如下。149运行结果如图所示。150运行结果

制作“热点关注”模块任务21511. 掌握操作元素属性的方法。2. 能根据开发需求选择合适的方法操作元素属性。152本任务主要内容是实现Tab栏切换，在有限的网页空间内展示多块内容，用户可以通过单击标题栏选项卡在多个内容列表之间进行切换。网页默认显示“热点关注”选项卡，以及相应的内容板块，Tab栏效果如图所示。153Tab栏效果当用户单击“国家时事”选项卡后，该选项卡的样式会被切换成被选中的状态，并且“热点关注”选项卡的被选中状态失效，内容列表也随之切换为对应的板块。此时，Tab栏效果如图所示。同理，在单击“广北要闻”选项卡后，选项卡与内容列表的切换效果与单击“热点关注”选项卡和“国家时事”选项卡类似。154Tab栏效果一、setAttribute()方法setAttribute()方法用于设置指定元素的属性值，语法格式如下。在以上代码中，setAttribute()方法接受两个参数，第一个参数name是要设置的属性名称，第二个参数value是属性的值。通过调用setAttribute()方法，可以在JavaScript中动态地设置元素的属性值，从而实现对元素的样式、标识或行为的修改。通过setAttribute()方法设置的属性值会覆盖原有属性值，如果该属性不存在，则会创建该属性。155二、getAttribute()方法getAttribute()方法用于获取元素的属性值，如果属性值存在，返回对应的值；如果属性值不存在，返回null。getAttribute()方法的语法格式如下。三、removeAttribute()方法removeAttribute()方法用于移除元素的属性值，该方法没有返回值，语法格式如下。156

制作“欢迎登录”页面任务31571. 掌握表单的常用属性。2. 掌握表单两种提交方法之间的区别。3. 能根据需求正确提交表单。