单元2--设计日期时间类网页特效.ppt

《单元2--设计日期时间类网页特效.ppt》由会员分享，可在线阅读，更多相关《单元2--设计日期时间类网页特效.ppt（57页珍藏版）》请在淘文阁 - 分享文档赚钱的网站上搜索。

1、单元单元2 2 设计日期时间类网页特效设计日期时间类网页特效任务任务2-1 显示常规格式的当前日显示常规格式的当前日期与时间期与时间 在网页中显示如下形式的当前日期在网页中显示如下形式的当前日期和时间。和时间。任务任务2-2 采用多种方式显示当前的日期采用多种方式显示当前的日期 在网页中以自定义形式显示当前日期在网页中以自定义形式显示当前日期及星期数，日期格式为：年月日星及星期数，日期格式为：年月日星期。期。【知识必备】【知识必备】2.1 2.1JavaScriptJavaScript的运算符与表达式的运算符与表达式 运算符也称为操作符，运算符也称为操作符，JavaScript常用的运常用的运

2、算符有：算术运算符（包括算符有：算术运算符（包括+、-、*、/、+、-）、比较运算符（包括）、比较运算符（包括、=、=、!=）、逻辑运算符（）、逻辑运算符（&、|、!）、赋值运算）、赋值运算符（）、条件运算符（符（）、条件运算符（?:）以及其他类型的）以及其他类型的运算符。运算符。表达式是运算符和操作数的组合，表表达式是运算符和操作数的组合，表达式通过求值确定表达式的值，这个值是达式通过求值确定表达式的值，这个值是操作数据实施运算所确定的结果。操作数据实施运算所确定的结果。由于表达式是以运算符为基础的，所由于表达式是以运算符为基础的，所以表达式可以分为算术表达式、字符串表以表达式可以分为算术表

3、达式、字符串表达式、赋值表达式、逻辑表达式等。达式、赋值表达式、逻辑表达式等。1JavaScript的算术运算符的算术运算符 算术运算符用于执行变量或数值之算术运算符用于执行变量或数值之间的算术运算。间的算术运算。给定给定y=5，表，表2-5解释了这些算术运解释了这些算术运算符。算符。运算符运算符描述描述示例示例运算运算结结果果+加加x=y+2 7-减减x=y-23*乘乘x=y*210/除除x=y/22.5%求余数求余数(保留整数保留整数)x=y%21+累加累加x=+y6x=y+5-递递减减x=-y4x=y-5表表2-5JavaScript的算术运算符及示例的算术运算符及示例2JavaScri

4、pt的赋值运算符的赋值运算符 赋值运算符用于给赋值运算符用于给JavaScript变量变量赋值。赋值。给定给定x=10和和y=5，表，表2-6解释了赋值解释了赋值运算符。运算符。运算符运算符示例示例等价于等价于结结果果=x=y5+=x+=yx=x+y15-=x-=yx=x-y5*=x*=yx=x*y50/=x/=yx=x/y2%=x%=yx=x%y0表表2-6JavaScript的赋值运算符及示例的赋值运算符及示例3JavaScript的连接运算符的连接运算符 +运算符用于把文本值或字符串变量运算符用于把文本值或字符串变量连接起来。连接起来。如果需要把两个或多个字符串变量连如果需要把两个或多个

5、字符串变量连接起来，则使用接起来，则使用+运算符。运算符。4JavaScript的比较运算符的比较运算符 比较运算符确定变量或它们的值之比较运算符确定变量或它们的值之间的关系。间的关系。在逻辑语句中使用比较运算符，通在逻辑语句中使用比较运算符，通过比较变量或它们的值来计算出表达式过比较变量或它们的值来计算出表达式的值是为的值是为true还是为还是为false。5JavaScript的逻辑运算符的逻辑运算符 逻辑运算符用于测定变量或值之间逻辑运算符用于测定变量或值之间的逻辑关系，其值为的逻辑关系，其值为true或或false。6JavaScript的条件运算符的条件运算符 JavaScript还

6、包含了基于某些条件对还包含了基于某些条件对变量进行赋值的条件运算符。变量进行赋值的条件运算符。2.22.2JavaScriptJavaScript的语句及其规则的语句及其规则 JavaScript语句向浏览器发出命令，语句向浏览器发出命令，告诉浏览器该做什么。告诉浏览器该做什么。1.分号分号2.JavaScript 代码代码3.JavaScript 代码块代码块4.JavaScript 区分大小写区分大小写5.空格空格6.对代码行进行折行对代码行进行折行2.32.3JavaScriptJavaScript的条件语句的条件语句 JavaScript的条件语句用于基于不同的条件语句用于基于不同的条

7、件来执行不同的语句。的条件来执行不同的语句。编写程序代码时，经常需要为不同编写程序代码时，经常需要为不同的决定执行不同的动作，可以在代码中的决定执行不同的动作，可以在代码中使用条件语句来完成该任务。使用条件语句来完成该任务。在在JavaScript中，可以使用以下条件语句。中，可以使用以下条件语句。（1）if语句：只有当指定条件为语句：只有当指定条件为true时，才使时，才使用该语句来执行代码。用该语句来执行代码。（2）ifelse语句：当条件为语句：当条件为true时执行代时执行代码，当条件为码，当条件为false时执行其他代码。时执行其他代码。（3）ifelse ifelse语句：使用该语

8、句语句：使用该语句来选择多个代码块之一来执行。来选择多个代码块之一来执行。（4）switch语句：使用该语句来选择多个语句：使用该语句来选择多个代码块之一来执行。代码块之一来执行。2.42.4JavaScriptJavaScript的函数的函数 函数是由事件驱动的，或者当它被函数是由事件驱动的，或者当它被调用时执行的可重复使用的代码块。调用时执行的可重复使用的代码块。函数是功能相对独立的代码块，该函数是功能相对独立的代码块，该代码块中的语句被作为一个整体执行。代码块中的语句被作为一个整体执行。函数是那些只能由事件或是函数调函数是那些只能由事件或是函数调用来执行的脚本的容器，因此，在浏览用来执行

9、的脚本的容器，因此，在浏览器最初加载和执行包含在网页中的脚本器最初加载和执行包含在网页中的脚本时，函数并没有被执行。时，函数并没有被执行。函数的目的是包含那些要完成某个函数的目的是包含那些要完成某个任务的脚本，这样就能够随时执行该脚任务的脚本，这样就能够随时执行该脚本和运行该任务。本和运行该任务。1JavaScript函数的语法格式函数的语法格式 函数就是包含在花括号中的代码块，函数就是包含在花括号中的代码块，前面使用了关键词前面使用了关键词function。2调用带参数的函数调用带参数的函数 函数能够通过函数的参数来接收数据，函数能够通过函数的参数来接收数据，函数可以有一个或多个形式参数，函

10、数调用函数可以有一个或多个形式参数，函数调用基于函数的形式参数可以有一个或多个实际基于函数的形式参数可以有一个或多个实际参数。参数。形式参数（形参，形式参数（形参，parameter）和实际参）和实际参数（实参，数（实参，argument）常会被弄混；形参是）常会被弄混；形参是函数定义的组成部分，而实参则是在调用函函数定义的组成部分，而实参则是在调用函数时用到的表达式。数时用到的表达式。3调用有返回值的函数调用有返回值的函数 有时，我们希望函数将值返回调用它的有时，我们希望函数将值返回调用它的地方，使用地方，使用return语句就可以实现。语句就可以实现。在使用在使用return语句时，函数会

11、停止执行，语句时，函数会停止执行，并返回指定的值。并返回指定的值。4JavaScript的全局函数的全局函数 JavaScript有以下有以下7个全局函数，用于完成一个全局函数，用于完成一些常用的功能：些常用的功能：eval()、parseInt()、parseFloat()、isNaN()、isFinite()、escape()、unescape()。2.52.5JavaScriptJavaScript的的StringString（字符串）对象（字符串）对象 JavaScript的字符串对象是存储字符的字符串对象是存储字符（如（如 Good）的变量。）的变量。字符串可以是引号中的任意文本。字

12、符串可以是引号中的任意文本。可以使用单引号或双引号。可以使用单引号或双引号。也可以在字符串中使用引号，只要也可以在字符串中使用引号，只要不匹配包围字符串的引号即可。不匹配包围字符串的引号即可。2.62.6JavaScriptJavaScript的的MathMath（数学）对象（数学）对象 Math对象包含用于各种数学运算的属对象包含用于各种数学运算的属性和方法，性和方法，Math对象的内置方法可以在不对象的内置方法可以在不使用构造函数创建对象时直接调用。使用构造函数创建对象时直接调用。调用形式为调用形式为Math.数学函数数学函数(参数参数)。1数学值数学值2数学方法数学方法2.72.7Jav

13、aScriptJavaScript的的DateDate（日期）对象（日期）对象 日期对象主要用于从系统中获得当前日期对象主要用于从系统中获得当前的日期和时间，设置当前日期和时间，在的日期和时间，设置当前日期和时间，在时间、日期同字符串之间转换。时间、日期同字符串之间转换。1定义日期定义日期2操作日期操作日期3比较日期比较日期4Date对象的函数对象的函数2.82.8JavaScriptJavaScript的计时方法的计时方法 通过使用通过使用JavaScript的计时方法，可以的计时方法，可以在一个设定的时间间隔之后执行代码，而在一个设定的时间间隔之后执行代码，而不是在函数被调用后立即执行。不

14、是在函数被调用后立即执行。我们称之为计时事件。我们称之为计时事件。JavaScritp中使用计时事件的两个关键中使用计时事件的两个关键方法是方法是setTimeout()和和clearTimeout()。1.setTimeout()方法方法 setTimeout()用于指定未来的某个时间用于指定未来的某个时间执行代码，即经过指定时间间隔后调用函数执行代码，即经过指定时间间隔后调用函数或运算表达式。或运算表达式。2.clearTimeout()方法方法 clearTimeout()用于取消用于取消setTimeout()。3.setInterval()方法方法 setInterval()方法可按

15、照指定的周期（以毫方法可按照指定的周期（以毫秒计）来调用函数或计算表达式。秒计）来调用函数或计算表达式。setInterval()方法会不停地调用函数，直到方法会不停地调用函数，直到clearInterval()被调用或窗口被关闭。被调用或窗口被关闭。由由setInterval()返回的值可用作返回的值可用作clearInterval()方法的参数。方法的参数。4.clearInterval()方法方法 clearInterval()方法可取消由方法可取消由setInterval()设置的毫秒时间。设置的毫秒时间。2.92.9JavaScriptJavaScript的的RegExpRegExp

16、对象及其方法对象及其方法1创建创建RegExp对象对象（1）直接量语法。）直接量语法。（2）创建）创建RegExp对象的语法。对象的语法。（3）RegExp对象的参数说明。对象的参数说明。（4）RegExp对象的返回值。对象的返回值。（5）创建）创建RegExp对象时抛出的异常。对象时抛出的异常。2创建创建RegExp对象的修饰符对象的修饰符 创建创建RegExp对象的修饰符如表对象的修饰符如表2-12所示。所示。（1）g修饰符。修饰符。（2）i修饰符。修饰符。修修饰饰符符直接量直接量语语法法语语法格式法格式功能描述功能描述i/regexp/inew RegExp(regexp,i)执执行行对

17、对大小写不敏感的匹配大小写不敏感的匹配g/regexp/gnew RegExp(regexp,g)执执行全局匹配（行全局匹配（查查找所有匹配而非在找到找所有匹配而非在找到第一个匹配后停止）第一个匹配后停止）m执执行多行匹配行多行匹配表表2-12创建创建RegExp对象的修饰符对象的修饰符3正则表达式的模式符正则表达式的模式符（1）带方括号的模式表达式。）带方括号的模式表达式。（2）模式表达式中的元字符。）模式表达式中的元字符。（3）模式表达式中的量词。）模式表达式中的量词。4RegExp对象的属性对象的属性5RegExp对象的方法对象的方法（1）test()方法。方法。（2）exec()方法。

18、方法。（3）compile()方法方法2.10 2.10 支持正则表达式的支持正则表达式的StringString对象的方法对象的方法1search()方法方法 search()方法用于检索字符串中指定方法用于检索字符串中指定的子字符串，或检索与正则表达式相匹配的子字符串，或检索与正则表达式相匹配的子字符串。的子字符串。2match()方法方法 可在字符串内检索指定的值，或找到一个可在字符串内检索指定的值，或找到一个或多个正则表达式的匹配。或多个正则表达式的匹配。该方法类似于该方法类似于indexOf()和和lastIndexOf()，但是它返回指定的值，而不是字符串的位置。但是它返回指定的值

19、，而不是字符串的位置。3replace()方法方法 replace()方法用于在字符串中用一方法用于在字符串中用一些字符替换另一些字符，或替换一个与些字符替换另一些字符，或替换一个与正则表达式匹配的子串。正则表达式匹配的子串。4split()方法方法 用于把一个字符串分割成字符串数用于把一个字符串分割成字符串数组。组。2.112.11JavaScriptJavaScript和和jQueryjQuery的使用比较的使用比较 网页中有以下网页中有以下HTML代码：代码：，分别使用，分别使用JavaScript方式方式和和jQuery方式实现在该标签位置输出文本方式实现在该标签位置输出文本信息。信息

20、。（1）使用）使用JavaScript方式实现。方式实现。（2）使用）使用jQuery方式实现。方式实现。【引导训练】【引导训练】任务任务2-3 不同的节日显示对应的不同的节日显示对应的问候语问候语【任务描述】【任务描述】在网页中根据不同的节日显示对应在网页中根据不同的节日显示对应的问候语。的问候语。例如，例如，“五一五一”劳动节显示的问候劳动节显示的问候语为语为“劳动节快乐！劳动节快乐！”，“十一十一”国庆国庆节显示的问候语为节显示的问候语为“国庆节快乐！国庆节快乐！”。任务任务2-4 在特定日期的特定时段在特定日期的特定时段显示打折促销信息显示打折促销信息【任务描述】【任务描述】（1）创建

21、）创建1个日期对象，且以常规格式在网页个日期对象，且以常规格式在网页中显示当前日期与时间。中显示当前日期与时间。（2）在特定日期的特定时段实施打折促销，并）在特定日期的特定时段实施打折促销，并在网页中输出相应的提示信息。在网页中输出相应的提示信息。任务任务2-5 不同时间段显示不同的问候语不同时间段显示不同的问候语 【任务描述】【任务描述】在网页中根据不同时间段（采用在网页中根据不同时间段（采用24小时制）显示相应的问候语，具体要求小时制）显示相应的问候语，具体要求如下。如下。（1）每天上午）每天上午8点之前（不包含点之前（不包含8点）显点）显示示“早上好！早上好！”。（2）每天上午）每天上午

22、12点之前（包含点之前（包含8点但不包含点但不包含12点）显示点）显示“上午好！上午好！”。（3）每天的）每天的12点至点至14点（包含点（包含12点但不包含点但不包含14点）显示点）显示“中午好！中午好！”。（4）每天的）每天的14点至点至17点（包含点（包含14点但不点但不包含包含17点）显示点）显示“下午好！下午好！”。（5）每天的）每天的17点之后（包含点之后（包含17点）显示点）显示“晚上好！晚上好！”。任务任务2-6 一周内每天输出不同的图片一周内每天输出不同的图片 【任务描述】【任务描述】在网页中实现一周内每天输出不同在网页中实现一周内每天输出不同的图片，星期一网页输出的图片如图

23、的图片，星期一网页输出的图片如图2-1所示。所示。图图2-1星期一网页显示的图片星期一网页显示的图片任务任务2-7 实现在线考试倒计时实现在线考试倒计时【任务描述】【任务描述】通过网络在线考试时，在网页中的通过网络在线考试时，在网页中的合适位置显示一个如图合适位置显示一个如图2-2所示的倒计时所示的倒计时牌，让考生及时掌握考试剩余的时间。牌，让考生及时掌握考试剩余的时间。图图2-2在线考试倒计时牌在线考试倒计时牌任务任务2-8 显示限定格式的日期显示限定格式的日期 【任务描述】【任务描述】在网页显示限定格式的日期，即年在网页显示限定格式的日期，即年使用使用4位整数，月、日都使用位整数，月、日都

24、使用2位整数表位整数表示，对于小于示，对于小于10的月和日，前面加的月和日，前面加“0”表示，如图表示，如图2-3所示。所示。图图2-3限定格式的日期限定格式的日期 【同步训练】【同步训练】任务任务2-9 验证日期的有效性验证日期的有效性 【任务描述】【任务描述】在网页中显示如图在网页中显示如图2-4所示的输入所示的输入“城城市市”名称和名称和“日期日期”的文本框，日期文本的文本框，日期文本框中初始状态显示当日的日期，当用户在框中初始状态显示当日的日期，当用户在日期文本框输入日期，且单击【提交】按日期文本框输入日期，且单击【提交】按钮时，验证日期数据的有效性，主要包括钮时，验证日期数据的有效性

25、，主要包括以下以下3个方面的验证。个方面的验证。（1）日期文本框不能为空，否则会出现）日期文本框不能为空，否则会出现提示信息对话框。提示信息对话框。（2）日期文本框中输入的日期必须符合）日期文本框中输入的日期必须符合指定的日期格式，否则会出现提示信息指定的日期格式，否则会出现提示信息对话框。对话框。（3）由于每年的）由于每年的1、3、5、7、8、10、12月月有有31天，天，4、6、9、10月只有月只有30天，闰年的天，闰年的2月有月有29天，非闰年的天，非闰年的2有只有有只有28天，日期文天，日期文本框中输入的日期中天不能违背以上规则，本框中输入的日期中天不能违背以上规则，否则会出现提示信息对话框。否则会出现提示信息对话框。图图2-4输入输入“城市城市”名称和名称和“日期日期”的文本框的文本框任务任务2-10 实现限时抢购倒计时实现限时抢购倒计时 【任务描述】【任务描述】购物网站中经常会限时抢购商品，设购物网站中经常会限时抢购商品，设计一个限时抢购倒计时牌，如图计一个限时抢购倒计时牌，如图2-5所示。所示。图图2-5购物网站的限时抢购倒计时牌购物网站的限时抢购倒计时牌