Web前端技术 课件 模块四 任务5 新曲发布倒计时功能实现

新曲发布倒计时功能实现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">单击按钮显示当前年月日。</p>2.<buttononclick="myFunction()">显示</button>3.<script>4.functionmyFunction(){5. 6. vard=newDate();7. 8. varyear=d.getFullYear();9. varmonth=d.getMonth();10. varday=d.getDate();11. 12. varx=document.getElementById("demo");13. x.innerHTML=year+'年'+month+'月'+day+'日';14.}15.</script>Data对象常用方法（续2）延时符在前面代码中继续使用表格中的其它方法，还可以实现查阅去年今天是星期几的功能。代码如下，代码完成后在浏览器中运行结果如图所示：代码完成后在浏览器中运行结果如图4-5-5所示：1.<pid="demo">我是显示区域。</p>2.<buttononclick="myFunction(0)">显示今天周几</button>3.<buttononclick="myFunction(1)">去年今天周几</button>4.<script>5.functionmyFunction(flag){ 6. vard=newDate(); 7. varyear=d.getFullYear();8. varday;9. varweekday=['日','一','二','三','四','五','六']10. varstr="今天是周"; 11. varx=document.getElementById("demo"); 12. if(flag==1){13. d.setFullYear(year-1);14. str="去年今天是周"15. } 16. day=d.getDay();17. x.innerHTML=str+weekday[day];18.}19.</script>定时器方法延时符JavaScript提供定时执行代码的功能，叫做定时器（timer），主要由setTimeout()和setInterval()这两个函数来完成。它们向任务队列添加定时任务。(1)setTimeout()函数setTimeout函数用来指定某个函数或某段代码，在多少毫秒之后执行。它返回一个整数，表示定时器的编号，以后可以用来取消这个定时器。语法如下：参数说明：setTimeout函数接受两个参数，第一个参数func|code是将要推迟执行的函数名或者一段代码，第二个参数delay是推迟执行的毫秒数。上面代码会先输出start和stop，然后等待1000毫秒再输出pause。注意，console.log(“pause”)必须以字符串的形式，作为setTimeout的参数。如果推迟执行的是函数，就直接将函数名，作为setTimeout的参数。timerId=setTimeout(func|code,delay);1.console.log('start');2.setTimeout('console.log(“pause”)',1000);3.console.log('stop');1.functionf(){2.console.log('pause');3.}4.setTimeout(f,1000);定时器方法（续1）延时符通过上面的语法学习，我们可以简单的使用setTimeout函数实现经典的数字时钟。代码如右侧所示：代码运行结果如图4-5-7所示：1.<divid="txt"></div>2.3.<script>4.functionstartTime(){5.vartoday=newDate();6.varh=today.getHours();7.varm=today.getMinutes();8.vars=today.getSeconds();9.//在numbers<10的数字前加上010.m=checkTime(m);11.s=checkTime(s);12.document.getElementById("txt").innerHTML=h+":"+m+":"+s;13.vart=setTimeout(function(){startTime()},500);14.}15.16.functioncheckTime(i){17.if(i<10){18.i="0"+i;19.}20.returni;21.}22.</script>定时器方法（续2）延时符(2)setInterval函数setInterval函数的用法与setTimeout完全一致，区别仅仅在于setInterval指定某个任务每隔一段时间就执行一次，也就是无限次的定时执行。上面代码中，每隔1000毫秒就输出一个2，会无限运行下去，直到关闭当前窗口。1.vari=12.vartimer=setInterval(function(){3.console.log(2);4.},1000)定时器方法（续1）延时符前面面是一个通过setInterval方法实现经典的数字时钟的例子。代码如右侧所示：代码运行结果如图4-5-8所示：1.<divid="txt"></div>2.3.<script>4.functionstartTime(){5.vartoday=newDate();6.varh=today.getHours();7.varm=today.getMinutes();8.vars=today.getSeconds();9.//在numbers<10的数字前加上010.m=checkTime(m);11.s=checkTime(s);12.document.getElementById("txt").innerHTML=h+":"+m+":"+s;13.vart=setInterval(function(){startTime()},500);14.}15.16.functioncheckTime(i){17.if(i<10){18.i="0"+i;19.}20.returni;21.}22.</script>取消定时器方法延时符定时器函数setTimeout和setInterval函数，都返回一个整数值，表示计数器编号。将该整数传入clearTimeout和clearInterval函数，就可以取消对应的定时器。上面代码中，每隔1000毫秒就输出一个2，会无限运行下去，直到关闭当前窗口。1.varid1=setTimeout(f,1000);2.varid2=setInterval(f,1000);3.4.clearTimeout(id1);5.clearInterval(id2);定时器方法（续1）延时符前面代码中，回调函数f不会再执行了，因为两个定时器都被取消了。利用这一点，可以写一个函数，通过按钮让前面制作的数字时钟停止，当然需要注意停止函数必须和定时器函数匹配，clearTimeout匹配setTimeout；clearInterval匹配setInterval。右面代码以clearTimeout匹配setTimeout为例，clearInterval匹配setInterval代码雷同不再列举：上面代码中，先调用setTimeout得到一个定时器编号t，然后把编号t关闭了定时器使得数字时钟停止。如图4-5-9所示：1.<divid="txt"></div>2.<buttononclick="stop()">停止</button>3.<script>4.vart; //这里必须定义为全局变量5.functionstartTime(){6.vartoday=newDate();7.varh=today.getHours();8.varm=today.getMinutes();9.vars=today.getSeconds();10.//在numbers<10的数字前加上011.m=checkTime(m);12.s=checkTime(s);13.document.getElementById("txt").innerHTML=h+":"+m+":"+s;14.t=setTimeout(function(){startTime()},500);15.}16.functioncheckTime(i){17.if(i<10){18.i="0"+i;19.}20.returni;21.}22.functionstop(){23. clearTimeout(t)24.}25.</script>任务实施延时符任务分析技术分析与实现完成代码任务分析延时符新歌发布倒计时任务，需要每秒(即1000毫秒)重新刷新一次倒计时时间，因此非常适合使用定时器函数实现。在本任务中选用setInInterval函数实现每秒运行一次自定义函数mytime()，再由mytime()函数使用Data对象将当前时间和发布时间进行计算得出发布剩余时间。最后再通过DOM对象将剩余时间显示在页面中即可实现任务完成要求。所以这项任务可以分解为3项子任务如图4-5-3所示：技术分析与实现：步骤1延时符步骤1：定义函数mytime()。为了方便实现代码重复运行，自定义函数将为这些重复运行的代码形成容器。1.functionmytime(){2.｝技术分析与实现：步骤2延时符步骤2：计算倒计时剩余时间1.创建当前时间，并获取当前时间的时分秒数值；2.计算出到新歌发布时间的剩余时间maxtime的值；3.计算出到新歌发布时间的剩余时间分minutes和秒seconds的值；实现代码如下：1.functionmytime(){2.vartim,hour1,min1;