JS典型网页特效.docx

1、JS典型网页特效JS典型网页特效学习情境1 电子时钟1.1 任务目标许多网站都在页面上有一个浮动的电子时钟以显示当前时间，提醒上网者注意上网时间。本次任务的目标是要在web页面上打造一个电子时钟。下面这张图片就是我们要实现的一个最基本的电子时钟的效果图：1.2 设计思路1.2.1 结构规划 （divcss结构）本次任务的时钟显示部分使用一个DIV（层）实现，而时钟的显示样式则使用CSS样式表加以修饰。而电子时钟的效果是通过每隔一秒获取一次系统时间并刷新DIV内容的方式来实现。1.2.2 任务分析 要实现本次任务的特效，我们应掌握以下几个关键知识点的应用：1 window.setTimeout(

2、)方法的使用；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” div标签简介： 是一个块级元素。这意味着它的内容自动地开始一个新行。实际上，换行是 固有的唯一格式表现。可

3、以通过 的 class 或 id 应用额外的样式。不必为每一个 都加上类或 id，虽然这样做也有一定的好处。可以对同一个 元素应用 class 或 id 属性，但是更常见的情况是只应用其中一种。这两者的主要差异是，class 用于元素组（类似的元素，或者可以理解为某一类元素），而 id 用于标识单独的唯一的元素。2) 在showtime这个div中加入一个span标签，并将其id属性设为“localtime”，用于放置显示内容时间: span标签简介： 标签被用来组合文档中的行内元素。可以为 span 应用 id 或 class 属性，这样既可以增加适当的语义，又便于对 span 应用样式。可

4、以对同一个 元素应用 class 或 id 属性，但是更常见的情况是只应用其中一种。这两者的主要差异是，class 用于元素组（类似的元素，或者可以理解为某一类元素），而 id 用于标识单独的唯一的元素。3) 在body标签之前加入style标签，书写div和span的样式表#showtime background:#333; color:#FFF; height:30px; line-height:30px; font-size:12px; text-indent:30px; width:250px; border:2px #999 solid; #localtime margin-left

5、:10px; color:#CCC; 样式表（css）对页面元素样式的设置方式有三种： HTML标签（tag）定义：采用这种样式设置方式的页面中对应标签都会套用样式表定义的样式。 它的语法是： tag property:value 独立定义：若某个HTML标签（tag）想套用这种方式定义的样式，必须将其class属性设置为该样式的样式名。它的语法是： .Classname property:value id定义：若某个HTML标签（tag）想套用这种方式定义的样式，必须将其id属性设置为该样式的样式名。它的语法是： #IDname property:value本次任务使用的是id定义4) 书写

6、实现电子时钟效果的JavaScript代码 在body标签中添加脚本标签 说明：script标签不一定非要在body标签中添加，他摆放的位置比较灵活。 定义生成时间字符串的函数 function showLocale(objD) var str; var hh = objD.getHours(); var mm = objD.getMinutes(); var ss = objD.getSeconds(); var getweek=objD.getDay(); if(getweek=1) week=星期一; else if(getweek=2) week=星期二; else if(getwee

7、k=3) week=星期三; else if(getweek=4) week=星期四; else if(getweek=5) week=星期五; else if(getweek=6) week=星期六; else week=星期日; 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 +

8、 ss; str += + hh + : + mm + : + ss; return(str);函数是几乎所有你用 JavaScript 编写的有用的功能的核心。一般而言，函数可以将一个程序分为若干逻辑块，每个块实现某个特定的功能。函数是 JavaScript 程序设计语言最主要的特征，而 JavaScript 之所以具有这么大的吸引力原因之一就是它特有的使用和创建函数的方式。在接下来的能力拓展中，我们会详细介绍函数说明： 功能将传入的时间对象转换为特定格式的字符串 参数（objD）时间对象 返回值由时间对象转换来的字符串函数体的具体意义： var str;定义变量，将来该变量的值就是由时间对

9、象转换来的字符串 var hh = objD.getHours(); var mm = objD.getMinutes(); var ss = objD.getSeconds(); var getweek=objD.getDay();获取时、分、秒和所传入日期是一个星期中的第几天 if(getweek=1) week=星期一; else if(getweek=2) week=星期二; else if(getweek=3) week=星期三; else if(getweek=4) week=星期四; else if(getweek=5) week=星期五; else if(getweek=6)

10、week=星期六; else week=星期日; 根据之前得到的日期计算应显示为星期几 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);

11、返回生成的字符串Date对象是JavaScript中一个重要的内置对象，在下一节我们将着重介绍这个对象。 书写定时启动，获取当前时间的JavaScript脚本代码function tick() var today;today = new Date();document.getElementById(localtime).innerText = showLocale(today);window.setTimeout(tick(), 1000);tick();脚本说明： 函数tick()的作用定时启动，获取当前时间 tick();调用、激活tick()函数的脚本语句；tick()函数的函数体说明：

12、 var today; 定义变量，将来它的值便是当前系统时间today = new Date(); 获取当前系统时间document.getElementById(localtime).innerText = showLocale(today); 调用showLocale()函数生成时间字符串，并将其作为内容加入span标签localtime中几乎每个HTML标签都有innerText属性，该属性的作用是设置或获取位于对象起始和结束标签内的文本。window.setTimeout(tick(), 1000); 设置每1000毫秒（1秒=1000毫秒）执行一次tick()函数setTimeout

13、 (表达式,延时时间)：在执行时，是在载入后延迟指定时间后，去执行一次表达式，仅执行一次。对于该函数的说明，我们会在“滚动公告”任务中与setInterval进行比较分析1.3.3 运行电子时钟.html文档1.4 能力拓展1.4.1 JavaScript函数简介函数为程序设计人员提供了一个丰常方便的能力。通常在进行一个复杂的程序设计时，总是根据所要完成的功能，将程序划分为一些相对独立的部分，每部分编写一个函数。从而，使各部分充分独立，任务单一，程序清晰，易懂、易读、易维护。JavaScript函数可以封装那些在程序中可能要多次用到的模块。并可作为事件驱动的结果而调用的程序。从而实现一个函数把

14、它与事件驱动相关联。这是与其它语言不样的地方。1.4.1.1 JavaScript函数的意义 将脚本编写为函数，就可以避免页面载入时执行该脚本。 函数包含着一些代码，这些代码只能被事件激活，或者在函数被调用时才会执行。 你可以在页面中的任何位置调用脚本（如果函数嵌入一个外部的 .js 文件，那么甚至可以从其他的页面中调用）。1.4.1.2 创建函数的语法Function 函数名 （参数,变元）函数体;Return 表达式; 说明 当调用函数时,所用变量或字面量均可作为变元传递。 函数由关键字Function定义。 函数名：定义自己函数的名字。 参数表，是传递给函数使用或操作的值，其值可以是常量

15、 ，变量或其它表达式。 通过指定函数名（实参）来调用一个函数。 必须使用Return将值返回。 函数名对大小写是敏感的。1.4.1.3 函数中的形式参数在函数的定义中，我们看到函数名后有参数表，这些参数变量可能是一个或几个。那么怎样才能确定参数变量的个数呢？在JavaScript中可通过arguments .Length来检查参数的个数。例：Function function_Name(exp1,exp2,exp3,exp4)Number =function _Name . arguments .length;if (Number1）document.wrile(exp2);if (Numbe

16、r2)document.write(exp3);if(Number3)document.write(exp4)1.4.2 JavaScript的date对象简介Date中文为日期的意思，Date继承自Object对象，此对象提供操作，显示日期与时间的函数 Date对象构造函数Date对象具有多种构造函数。new Date()new Date(milliseconds)new Date(datestring)new Date(year, month)new Date(year, month, day)new Date(year, month, day, hours)new Date(year,

17、month, day, hours, minutes)new Date(year, month, day, hours, minutes, seconds)new Date(year, month, day, hours, minutes, seconds, microseconds) Date对象构造函数参数说明 milliseconds - 距离JavaScript内部定义的起始时间1970年1月1日的毫秒数 datestring - 字符串代表的日期与时间。此字符串可以使用Date.parse()转换 year - 四位数的年份，如果取值为0-99，则在其之上加上1900 month -

18、 0(代表一月)-11(代表十二月)之间的月份 day - 1-31之间的日期 hours - 0(代表午夜)-23之间的小时数 minutes - 0-59之间的分钟数 seconds - 0-59之间的秒数 microseconds - 0-999之间的毫秒数 Date对象返回值 如果没有任何参数，将返回当前日期 如果参数为一个数字，将数字视为毫秒值，转换为日期 如果参数为一个字符串，将字符串视为日期的字符串表示，转换为日期 还可以使用六个构造函数精确定义，并返回时间 示例var d1 = new Date();document.write(d1.toString();var d2 = n

19、ew Date(2009-08-08 12:12:12);document.write(d2.toString();var d3 = new Date(2009, 8, 8);document.write(d3.toString(); Date做为JavaScript的一种内置对象，必须使用new的方式创建。 Date对象在JavaScript内部的表示方式是，距1970年1月1日午夜(GMT时间)的毫秒数(时间戳)，我们在这里也把Date的内部表示形式称为时间戳。可以使用getTime()将Date对象转换为Date的时间戳，方法setTime()可以把Date的时间戳转换为Date的标准形

20、式。 Date函数使用语法date.方法名(参数1,参数2,.);Date.方法名(); date代表一个日期对象的实例，Date代表日期对象，date.方法名调用的为对象的成员函数 Date.方法名调用的为对象的静态函数 示例var d=new Date();var d2=Date.UTC();1.5 任务总结本次任务我们使用JavaScript制作了一个基本的电子时钟特效。在制作该特效的过程中我们了解了DIV、SPAN这两个HTML标签，HTML套用CSS样式表样式的方法和JavaScript的函数的意义以及JavaScript中的date对象。我们将今天的知识点归纳如下： DIV和SPA

21、N都是HTML中的块级元素，我们经常使用DIV或者SPAN进行web页面的排版，让内容分块显示。 样式表（css）对页面元素样式的设置方式有三种：HTML标签（tag）定义、独立定义和id定义。 JavaScript中，函数是几乎所有JavaScript 编写的有用的功能的核心。它除了和普通编程语言（如c）的函数有相同目的（减少编码量，一处定义，随处调用）之外，还可以避免页面载入时执行某些不希望页面载入时就执行的脚本 date对象是JavaScript中用于存储、处理和操作日期的内置对象 特别提醒：setTimeout (表达式,延时时间)：在执行时，是在载入后延迟指定时间后，去执行一次表达式

22、，仅执行一次。1.6 附录1.6.1 css常用属性大全属性名属性说明属性值FONT-FAMILY使用什么字体字体集FONT-STYLE字体是否斜体normal、italic、obliqueFONT-VARIANT是否用小体大写normal、small-capsFONT-WEIGHT字体的粗细normal、bold、bolder、lithter等FONT-SIZE字体的大小absolute-size、relative-size、length、percentage等COLOR定义前景色#RGB 颜色的十六进制值BACKGROUND-COLOR定义背景色#RGB 颜色的十六进制值BACKGROUN

23、D-IMAGE定义背景图案图片路径BACKGROUND-REPEAT重复方式tepeat-x、repeat-y、no-repeatBACKGROUND-ATTACHMENT设置滚动dcroll、fixedBACKGROUND-POSITION初始位置percentage、length、top、left、right、bottom等WORD-SPACING单词之间的间距normalLETTER-SPACING字母之间的间距normalTEXT-DECORATION文字的装饰样式none,underline,overline,line-through|blinkVERTICAL-ALIGN垂直方向的

24、位置baseline,sub,super,top,text-top,middle,bottom,text-bottom,capitalize,uppercaseTEXT-TRANSFORM文本转换lowercase,noneTEXT-ALIGN对齐方式left,right,center,justifyTEXT-INDENT首行的缩进方式LINE-HEIGHT文本的行高normalMARGIN-TOP顶端边距length,percentage,autoMARGIN-BOTTOM右侧边距length,percentage,autoMARGIN-LEFT底端边距length,percentage,a

25、utoMARGIN-RIGHT左侧边距length,percentage,autoPADDING-TOP顶端填充距离length,percentagePADDING-BOTTOM右侧填充距离length,percentagePADDING-LEFT底端填充距离length,percentagePADDING-RIGHT左侧填充距离length,percentageBORDER-TOP-WIDTH顶端边框宽度thin,medium,thick,lengthBORDER-BOTTOM-WIDTH底端边框宽度thin,medium,thick,lengthBORDER-LEFT-WIDTH左端边框宽

26、度thin,medium,thick,lengthBORDER-RIGHT-WIDTH右端边框宽度thin,medium,thick,lengthBORDER-TOP定义顶端border-top-width,color等BORDER-BOTTOM定义底端border-top-width,color等BORDER-LEFT定义左端border-top-width,color等BORDER-RIGHT定义右端border-top-width,color等BORDER-STYLE设置边框样式none,dotted,dash,solid等BORDER-COLOR设置边框颜色colorHEIGHT定义高

27、度属性length,percentage,autoWIDTH定义宽度属性length,percentage,autoFLOAT文字环绕left,right,noneCLEAR那一边环绕left,right,none,bothBORDER-WIDTH定义宽度thin,medium,thick,lengthDISPLAY定义是否显示block,inline,list-item,noneWHITE-SPACING怎样处理空白normal,pre,nowrapLIST-STYLE-TYPE加项目编号disc,circle,square等LIST-STYLE-IMAGE加图案noneLIST-STYLE-POSITION第二行起始位置inside,outsideLIST-STYLE一次性定义列表属性cursor自动auto“十”字crosshair默认指针default手形hand移动move箭头朝右方e-resize箭头朝右上方ne-resize箭头朝左上方nw-resize箭头朝上方n-resize箭头朝右下方se-resize箭头朝左下方sw-resize箭头朝下方s-resize箭头朝左方w-resize文本“I”形text等待wait帮助help