人民大2024Web前端技术-PPT模块四 任务5 新曲发布倒计时功能实现.pptx

新曲发布倒计时功能实现Web前端技术主讲老师：何成芊延时符

CONTENTS目录01任务描述03知识点导图02学习目标04相关知识05任务实施延时符

任务描述延时符

任务描述倒计时，在我们的生活的处处都有倒计时的身影，或者可以说时时刻刻都在倒计时，它常常出现在在某夕夕、某宝、某东等。当然还有节假日的倒计时、高考倒计时、纪念日倒计时等等，可以说在生活中到处都是倒计时。下面我们将学习如何使用JavaScript中的日期对象和定时器方法完成新歌发布倒计时任务。效果如图4-5-1所示。延时符

学习目标延时符

学习目标掌握日期时间对象Date的使用；掌握定时器setTimeout()或setInterval()使用方法；掌握clearTimeout()停止定时器的方法；知识目标能够编写JavaScript代码实现显示时间和日期功能；能够编写JavaScript代码实现发布倒计时功能；技能目标延时符培养创新思维能力；培养严谨、踏实的工作态度；培养勇于挑战难度的拼搏精神；素养目标

知识点导图延时符

知识点导图延时符

相关知识延时符Data对象Data对象常用方法定时器方法取消定时器

在JavaScript中对日期和时间数据处理使用Data对象。创建Date使用newDate()，通常可以用以下四种方法日期和时间的创建：参数说明：milliseconds?参数是一个Unix时间戳（UnixTimeStamp），它是一个整数值，表示自1970年1月1日00:00:00UTC（theUnixepoch）以来的毫秒数。dateString?参数表示日期的字符串值。year,month,day,hours,minutes,seconds,milliseconds?分别表示年、月、日、时、分、秒、毫秒。Data对象延时符vard=newDate();vard=newDate(milliseconds);vard=newDate(dateString);vard=newDate(year,month,day,hours,minutes,seconds,milliseconds);

根据上面的语法和参数说明，可以使用下面的代码来创建具体的日期和时间：上述代码在浏览器控制台输入结果如图4-5-4所示：Data对象（续）延时符1.vartoday=newDate(); //创建当前日期时间2.vard1=newDate(October1,20198:00:00); //创建2019年10月1日8时整3.vard2=newDate(2019,9,1); //创建2019年10月1日4.vard3=newDate(2019,9,1,8,30,0); //创建2019年10月1日8时30分整5.console.log(today);6.console.log(d1);7.console.log(d2);8.console.log(d3);

Data对象常用方法延时符Data对象的常用方法都围绕着日期或者时间数据的读写操作。主要方法如表4-5-1所示：方法说明getFullYear()从Date对象以四位数字返回年份。getMonth()从Date对象返回月份(0~11)。月份的值从0开始，表示1月。getDate()从Date对象返回一个月中的某一天(1~31)。getDay()从Date对象返回一周中的某一天(0~6)。数值0表示周日。getHours()返回Date对象的小时(0~23)。getMinutes()返回Date对象的分钟(0~59)。getSeconds()返回Date对象的秒数(0~59)。setFullYear()设置Date对象中的年份（四位数字）。setMonth()设置Date对象中月份(0~11)。setDate()设置Date对象中月的某一天(1~31)。

Data对象常用方法（续1）延时符使用表格中部分方法，可以编写显示当前年月日的JavaScript代码如下：代码完成后在浏览器中运行结果如图4-5-5所示：1.pid=demo单击按钮显示当前年月日。/p2.buttononclick=myFunction()显示/button3.script4.functionmyFunction(){5. 6. vard=newDate();7. 8. varyear=d.getFullYear();9. varmonth=d.getMonth();10. vard