《WEB前端开发实战》课件 任务二：日期时间显示特效制作

项目二

JavaScript网页特效制作任务二

日期时间显示特效制作主讲：黄美世htmlh5imgjavascriptwebcsscolorhr目录任务情境任务目标任务描述任务实施学习资源考核评价1+X考证练习htmlh5imgjavascriptwebcolorhr任务情境随着科技的发展信息技术越来越发达，当我们浏览一些网页时，会发现网页上有各种各样的动态效果，使得这个网页加的生动和有活力，而这些动画的效果很大程度是JavaScript控制的。例如平时我们平时浏览网页看到的页面的效果切换、动画效果、页⾯游戏、时间显示等等。本次专题任务采用JavaScript中的定时器、Date对象来实现页面中日期时间显示特效的制作。工作任务单工作任务单任务要求根据效果图完成美食详情页日期时间特效制作甲方提供的设计图

如右图所示评判标准1.熟练掌握计时器方法。2.能够掌握在标题栏显示内容的方法3.掌握日期函数的使用方法。4.掌握获取时间的方法。1+X技能考核标准能正确声明变量和函数、利用定时器以及使用Date对象完成日期时间显示特效制作技能大赛考核要求制作的页面需具有交互设计，并符合W3C的HTML和CSS标准作品提交要求站点文件夹评判标准1.熟练掌握计时器方法。2.能够掌握在标题栏显示内容的方法3.掌握日期函数的使用方法。4.掌握获取时间的方法。任务目标任务目标熟练掌握定时器方法。能够掌握在标题栏显示内容的方法掌握日期函数的使用方法。掌握获取时间的方法。任务描述在网页中添加时间特效，可以方便用户查询时间和日历，使用JavaScript可以制作多种时间特效，本节以制作页面的时间特效放置于页面头部内容中为例，获取当前的时间和日期。JavaScript提供了专门用于时间和日期的对象类，通过new运算符合Date()构造函数可以创建日期对象。日期对象可在页面中显示当前的系统时间，以及进行日期类型的数据运算任务实施图1

效果图（有特效）图1

效果图（无特效）效果图展示任务分析编写JS脚本，实现特效在制作特效之前先在美食页面项目下新建JavaScript文件，在页面中链接js文件特效分析：当打开页面时，页面的头部显示当前时间，且时间随着系统的时间改变而改变。任务实施效果图展示任务分析编写JS脚本，实现特效新建JavaScript文件及链接JavaScript文件编辑JavaScript文件调用函数声明及获取当前时间步骤一步骤二步骤三步骤四编写JS脚本，实现日期时间显示特效操作步骤处理获取时间步骤五将时间输出到页面步骤六任务实施效果图展示任务分析编写JS脚本，实现特效学习资源JavaScrip对象内置对象定时器1.什么是JavaScript对象？在JavaScript中，对象是一组无序相关属性和方法的集合。所有的事物都是对象，例如字符串、数值、数组、函数等。对象也是一个变量，但对象可以包含多个值（多个变量），每个值以

name:value

对呈现。对象是由属性和方法组成●属性：事物的特征，在对象中用属性来表示（常用名词）●方法：事物的行为，在对象中用方法来表示（常用动词）学习资源JavaScrip对象内置对象定时器2.为什么需要对象：

保存一个值时，可以使用变量，保存多个值（一组值）时，可以使用数组。若要保存庞大的信息集合时，则JavaScript中的对象表达结构更清晰、更强大。3.创建对象的三种方式：在JavaScript中，我们可以采用以下三种方式创建对象（object）：●利用字面量创建对象。●利用newObject创建对象。●利用构造函数创建对象。学习资源JavaScrip对象内置对象定时器3.1利用字面量创建对象对象字面量：就是大括号里面包含了表达这个具体事物（对象）的属性和方法。大括号里面采取键值对的形式表示。键：相当于属性名。值：相当于属性值，可以是任意类型的值（如数字类型、字符串类型、布尔类型、函数类型等）3.2利用newObject创建对象●Object()：第一个字母大写。●newObject()：需要new关键字。●使用的格式：对象.属性=值。学习资源JavaScrip对象内置对象定时器3.3利用构造函数创建对象。构造函数是一种特殊的函数，主要用来初始化对象，即为对象成员变量赋初始值，它总与new关键字一起使用。我们可以把对象中一些公共的属性和方法抽取出来，然后封装到这个函数里面。构造函数的语法格式：function构造函数名(){this.属性=值；this.方法=function()；}调用构造函数：new构造函数名()注意：●构造函数名首字母大写。●函数内的属性和方法前面须添加this，表示当前对象的属性和方法。●构造函数不需要return就可以返回结果。●当我们创建对象的时候，必须用new来调用构造函数。学习资源JavaScrip对象内置对象定时器内置对象是指JS语言自带的一些对象，这些对象供开发者使用，并提供了一些常用的或者是最基本且必要的功能（属性和方法）。内置对象最大的优点就是能帮助我们快速开发。JavaScript提供了多个内置对象：Math、Date、Array、String等什么是内置对象？学习资源JavaScrip对象内置对象定时器1.Math对象。Math对象不是构造函数，它具有数学常数和函数的属性与方法。跟数学相关的运算（求绝对值、取整、求最大值等）都可以使用Math中的成员。Math常用函数的用法：

常用的内置对象？注意：上面的函数必须带括号。学习资源JavaScrip对象内置对象定时器2.Date对象是一个构造函数，需要实例化后才能使用，用来处理日期和时间。Date()方法的使用（1）获取当前时间必须实例化；（2）Date()构造函数的参数；如果括号里面有时间，就返回参数里面的时间。例如，日期格式字符串为‘2022-5-1’，可以写成newDate(‘2022-5-1’)或者newDate(‘2022/5/1’)。如果Date()不写参数，就返回当前时间。如果Date()里面写参数，就返回括号里面输入的时间。学习资源（3）日期获取方法

获取方法用于获取日期的某个部分（来自日期对象的信息）。右边面是最常用的方法（以字母顺序排序）：

如果括号里面有时间，就返回参数里面的时间。例如日期格式字符串为‘2022-2-5’，可以写成newDate('2022-2-5')或者newDate('2022/2/5')如果Date()不写参数，就返回当前时间；如果Date()里面写参数，就返回括号里面输入的时间。JavaScrip对象内置对象定时器学习资源什么是定时器？

JavaScript定时器是利用JavaScript实现定时的一种方法，很多页面特效的制作都离不开定时器，如在线时钟特效、图片轮播特效、广告弹窗特效等。只要是与自动执行有关的特效，都可以通过定时器来实现。JavaScrip对象内置对象定时器定时器的分类setTimeout()延迟定时器setInterval()循环定时器定时器的清除

每次使用定时器时，都必须清除定时器。每一个定时器开启后，都会返回一个对应的ID，通过这个ID就清除定时器。以下为清除定时器的方法：清除定时器作用clearTimeout(timer)用于清除setTimeoutclearInterval(timer)用于清除setInterval学习资源JavaScrip对象内置对象定时器1.延迟定时器setTimeout(code,millisec)参数描述code必需。要调用的函数后要执行的JavaScript代码串。millisec必须。在执行代码前需等待的毫秒数。

2.循环定时器setInterval(code,millisec)参数描述code必须。要调用的函数后要执行的JavaScript代码串。millisec必须。周期性执行或调用code之间的时间间隔，以毫秒计小贴士在使用定时器时，第一个参数code传入的是函数，不能给作为参数的函数加括号。setInterval(nowTime,1000);正确写法setInterval(nowTime(),1000);错误写法注：添加括号表明直接调用函数，没有括号表明这个函数是作为参数传入，并不会被直接调用，而是在满足条件后调用，这些的条件指的是每隔1s调用一次定时器的用法考核评价班级：姓名：学号任务名称：古迹页面制作评价项目评价标准自评情况考核情况课前自主探究（10%）完成课前学习通中下发任务□完成□基本完成□未完成□完成□基本完成□未完成工作过程（50%）布局结构分析能够进行正确的页面布局划分□完成□基本完成□未完成□完成□基本完成□未完成页面切图能够进行正确的切图□完成□基本完成□未完成□完成□基本完成□未完成网站搭建网站文件命名正确□完成□基本完成□未完成□完成□基本完成□未完成HTML代码编写代码编写符合W3C标准□完成□基本完成□未完成□完成□基本完成□未完成CSS代码编写样式书写正确，并能实现参考效果□完成□基本完成□未完成□完成□基本完成□未完成项目成果（20%）工作完整能够按时完成任务□是□是工作规范能按企业规范要求进行操作□是□是成果展示能准确表