项目二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