JS典型网页特效

JS典型网页特效学习情境1电子时钟1.1任务目标许多网站都在页面上有一个浮动的电子时钟以显示当前时间，提醒上网者注意上网时间。本次任务的目标是要在web页面上打造一个电子时钟。下面这张图片就是我们要实现的一个最基本的电子时钟的效果图：1.2设计思路1.2.1结构规划（div＋css结构）本次任务的时钟显示部分使用一个DIV（层）实现，而时钟的显示样式则使用CSS样式表加以修饰。而电子时钟的效果是通过每隔一秒获取一次系统时间并刷新DIV内容的方式来实现。1.2.2任务分析要实现本次任务的特效，我们应掌握以下几个关键知识点的应用：1window.setTimeout()方法的使用；2时间对象的使用；3获取web页面元素和在web页面元素中添加内容的方法；1.3任务实施1.3.1创建一个html文档作为本次任务的开发载体1)打开DreamWeaver，点击文件-新建，在弹出的新建文件对话框中选择html，点击创建生成一个html文档2)点击文件-保存，或直接按快捷键Ctrl+S将文档保存为“电子时钟.html”1.3.2制作电子时钟的显示面板；1)在body标签中间添加显示时间的容器——div标签，并将其id属性设为：“showtime”divid=showtime/divdiv标签简介：div是一个块级元素。这意味着它的内容自动地开始一个新行。实际上，换行是div固有的唯一格式表现。可以通过div的class或id应用额外的样式。不必为每一个div都加上类或id，虽然这样做也有一定的好处。可以对同一个div元素应用class或id属性，但是更常见的情况是只应用其中一种。这两者的主要差异是，class用于元素组（类似的元素，或者可以理解为某一类元素），而id用于标识单独的唯一的元素。2)在showtime这个div中加入一个span标签，并将其id属性设为“localtime”，用于放置显示内容divid=showtime时间:spanid=localtime/span/divspan标签简介：span标签被用来组合文档中的行内元素。可以为span应用id或class属性，这样既可以增加适当的语义，又便于对span应用样式。可以对同一个span元素应用class或id属性，但是更常见的情况是只应用其中一种。这两者的主要差异是，class用于元素组（类似的元素，或者可以理解为某一类元素），而id用于标识单独的唯一的元素。3)在body标签之前加入style标签，书写div和span的样式表styletype=text/css#showtime{background:#333;color:#FFF;height:30px;line-height:30px;font-size:12px;text-indent:30px;width:250px;border:2px#999solid;}#localtime{margin-left:10px;color:#CCC;}/style样式表（css）对页面元素样式的设置方式有三种：HTML标签（tag）定义：采用这种样式设置方式的页面中对应标签都会套用样式表定义的样式。它的语法是：tag{property:value}独立定义：若某个HTML标签（tag）想套用这种方式定义的样式，必须将其class属性设置为该样式的样式名。它的语法是：.Classname{property:value}id定义：若某个HTML标签（tag）想套用这种方式定义的样式，必须将其id属性设置为该样式的样式名。它的语法是：#IDname{property:value}本次任务使用的是id定义4)书写实现电子时钟效果的JavaScript代码在body标签中添加脚本标签scriptlanguage=javascript/script说明：script标签不一定非要在body标签中添加，他摆放的位置比较灵活。定义生成时间字符串的函数scriptlanguage=javascriptfunctionshowLocale(objD){varstr;varhh=objD.getHours();varmm=objD.getMinutes();varss=objD.getSeconds();vargetweek=objD.getDay();if(getweek==1)week=星期一;elseif(getweek==2)week=星期二;elseif(getweek==3)week=星期三;elseif(getweek==4)week=星期四;elseif(getweek==5)week=星期五;elseif(getweek==6)week=星期六;elseweek=星期日;str=(objD.getYear())+年;//如果不显示年份,只需把这行注释掉str+=(objD.getMonth()+1)+月+objD.getDate()+日;str+=week;//如果不显示星期,只需把这行注释掉if(hh10)hh='0'+hh;if(mm10)mm='0'+mm;if(ss10)ss='0'+ss;str+=+hh+:+mm+:+ss;return(str);}/script函数是几乎所有你用JavaScript编写的有用的功能的核心。一般而言，函数可以将一个程序分为若干逻辑块，每个块实现某个特定的功能。函数是JavaScript程序设计语言最主要的特征，而JavaScript之所以具有这么大的吸引力原因之一就是它特有的使用和创建函数的方式。在接下来的能力拓展中，我们会详细介绍函数说明：功能——将传入的时间对象转换为特定格式的字符串参数——（objD）时间对象返回值——由时间对象转换来的字符串函数体的具体意义：varstr;——定义变量，将来该变量的值就是由时间对象转换来的字符串varhh=objD.getHours();varmm=objD.getMinutes();varss=objD.getSeconds();vargetweek=objD.getDay();——获取时、分、秒和所传入日期是一个星期中的第几天if(getweek==1)week=星期一;elseif(getweek==2)week=星期二;elseif(getweek==3)week=星期三;elseif(getweek==4)week=星期四;elseif(getweek==5)week=星期五;elseif(getweek==6)week=星期六;elseweek=星期日;——根据之前得到的日期计算应显示为星期几str=(objD.getYear())+年;str+=(objD.getMonth()+1)+月+objD.getDate()+日;——生成日期字符串str+=week;——加入星期字符串if(hh10)hh='0'+hh;if(mm10)mm='0'+mm;if(ss10)ss='0'+ss;——将时间字符串进行格式化，保证时、分、秒都由两位字符显示str+=+hh+:+mm+:+ss;——加入完成格式化的时、分、秒return(str);——返回生成的字符串Date对象是JavaScript中一个重要的内置对象，在下一节我们将着重介绍这个对象。书写定时启动，获取当前时间的JavaScript脚本代码scriptlanguage=javascript……functiontick(){vartoday;today=newDate();document.getElementById(localtime).innerText=showLocale(today);window.setTimeout(tick(),1000);}tick();/script脚本说明：函数tick()的作用——定时启动，获取当前时间tick();——调用、激活tick()函数的脚本语句；tick()函数的函数体说明：vartoday;——定义变量，将来它的值便是当前系统时间today=newDate();——获取当前系统时间document.getElementById(localtime).innerText=showLocale(today);——调用showLocale()函数生成时间字符串，并将其作为内容加入span标签localtime中几乎每个HTML标签都有innerText属性，该属性的作用是设置或获取位于对象起始和结束标签内的文本。window.setTimeout(tick(),1000);——设置每1000毫秒（1秒=1000毫秒）执行一次tick()函数setTimeout(表达式,延时时间)：在执行时，是在载入后延迟指定时间后，去执行一次表达式，仅执行一次。对于该函数的说明，我们会在“滚动公告”任务中与setInterval进行比较分析1.3.3运行电子时钟.html文档1.4能力拓展1.4.1JavaScript函数简介函数为程序设计人员提供了一个丰常方便的能力。通常在进行一个复杂的程序设计时，总是根据所要完成的功能，将程序划分为一些相对独立的部分，每部分编写一个函数。从而，使各部分充分独立，任务单一，程序清晰，易懂、易读、易维护。JavaScript函数可以封装那些在程序中可能要多次用到的模块。并可作为事件驱动的结果而调用的程序。从而实现一个函数把它与事件驱动相关联。这是与其它语言不样的地方。1.4.1.1JavaScript函数的意义将脚本编写为函数，就可以避免页面载入时执行该脚本。函数包含着一些代码，这些代码只能被事件激活，或者在函数被调用时才会执行。你可以在页面中的任何位置调用脚本（如果函数嵌入一个外部的.js文件，那么甚至可以从其他的页面中调用）。1.4.1.2创建函数的语法Function函数名（参数,变元）{函数体;Return表达式;}说明当调用函数时,所用变量或字面量均可作为变元传递。函数由关键字Function定义。函数名：定义自己函数的名字。参数表，是传递给函数使用或操作的值，其值可以是常量，变量或其它表达式。通过指定函数名（实参）来调用一个函数。必须使用Return将值返回。函数名对大小写是敏感的。1.4.1.3函数中的形式参数在函数的定义中，我们看到函数名后有参数表，这些参数变量可能是一个或几个。那么怎样才能确定参数变量的个数呢？在JavaScript中可通过arguments.Length来检查参数的个数。例：Functionfunction_Name(exp1,exp2,exp3,exp4)Number=function_Name.arguments.length;if(Number1）document.wrile(exp2);if(Number2)document.write(exp3);if(Number3)document.write(exp4);...1.4.2JavaScript的date对象简介Date中文为日期的意思，Date继承自Object对象，此对象提供操作，显示日期与时间的函数Date对象构造函数Date对象具有多种构造函数。newDate()newDate(milliseconds)newDate(datestring)newDate(year,month)newDate(year,month,day)newDate(year,month,day,hours)newDate(year,month,day,hours,minutes)newDate(year,month,day,hours,minutes,seconds)newDate(year,month,day,hours,minutes,seconds,microseconds)Date对象构造函数参数说明milliseconds-距离JavaScript内部定义的起始时