JS典型网页特效

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

2、内容的方法；任务实施创建一个html文档作为本次任务的开发载体打开DreamWeaver，点击文件-新建，在弹出的新建文件对话框中选择html，点击创建生成一个html文档点击文件-保存，或直接按快捷键Ctrl+S将文档保存为“电子时钟.html”制作电子时钟的显示面板；在body标签中间添加显示时间的容器div标签，并将其id属性设为：“showtime”div标签简介： 是一个块级元素。这意味着它的内容自动地开始一个新行。实际上，换行是 固有的唯一格式表现。可以通过 的 class 或 id 应用额外的样式。不必为每一个 都加上类或 id，虽然这样做也有一定的好处。可以对同一个 元素应用

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

4、或者可以理解为某一类元素），而 id 用于标识单独的唯一的元素。在body标签之前加入style标签，书写div和span的样式表#showtimebackground:#333;color:#FFF;height:30px;line-height:30px;font-size:12px;text-indent:30px;width:250px;border:2px #999 solid;#localtime margin-left:10px; color:#CCC; 样式表（css）对页面元素样式的设置方式有三种：HTML标签（tag）定义：采用这种样式设置方式的页面中对应标签都会套用样式表

5、定义的样式。 它的语法是：tag property:value独立定义：若某个HTML标签（tag）想套用这种方式定义的样式，必须将其class属性设置为该样式的样式名。它的语法是：.Classname property:valueid定义：若某个HTML标签（tag）想套用这种方式定义的样式，必须将其id属性设置为该样式的样式名。它的语法是：#IDname property:value本次任务使用的是id定义书写实现电子时钟效果的JavaScript代码在body标签中添加脚本标签 说明：script标签不一定非要在body标签中添加，他摆放的位置比较灵活。定义生成时间字符串的函数funct

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

7、e 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);函数是几乎所有你用 JavaScript 编写的有用的功能的核心。一般而言，函数可以将一个程序分为若干逻辑块，每个块实现某个特定的

8、功能。函数是 JavaScript 程序设计语言最主要的特征，而 JavaScript 之所以具有这么大的吸引力原因之一就是它特有的使用和创建函数的方式。在接下来的能力拓展中，我们会详细介绍函数说明：功能将传入的时间对象转换为特定格式的字符串参数（objD）时间对象返回值由时间对象转换来的字符串函数体的具体意义：var str;定义变量，将来该变量的值就是由时间对象转换来的字符串var hh = objD.getHours();var mm = objD.getMinutes();var ss = objD.getSeconds();var getweek=objD.getDay();获取时、

9、分、秒和所传入日期是一个星期中的第几天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) week=星期六;else week=星期日;根据之前得到的日期计算应显示为星期几str =(objD.getYear() +年; str+=(objD.getMonth() + 1) + 月 + objD.getDate() +日;生成日期字符串str

10、+=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脚本代码function tick() var today;today = new Date();document.getEle

11、mentById(localtime).innerText = showLocale(today);window.setTimeout(tick(), 1000);tick();脚本说明：函数tick()的作用定时启动，获取当前时间tick();调用、激活tick()函数的脚本语句；tick()函数的函数体说明：var today;定义变量，将来它的值便是当前系统时间today = new Date();获取当前系统时间document.getElementById(localtime).innerText = showLocale(today);调用showLocale()函数生成时间字符串

12、，并将其作为内容加入span标签localtime中几乎每个HTML标签都有innerText属性，该属性的作用是设置或获取位于对象起始和结束标签内的文本。window.setTimeout(tick(), 1000);设置每1000毫秒（1秒=1000毫秒）执行一次tick()函数setTimeout (表达式,延时时间)：在执行时，是在载入后延迟指定时间后，去执行一次表达式，仅执行一次。对于该函数的说明，我们会在“滚动公告”任务中与setInterval进行比较分析运行电子时钟.html文档能力拓展JavaScript函数简介函数为程序设计人员提供了一个丰常方便的能力。通常在进行一个复杂的

13、程序设计时，总是根据所要完成的功能，将程序划分为一些相对独立的部分，每部分编写一个函数。从而，使各部分充分独立，任务单一，程序清晰，易懂、易读、易维护。JavaScript函数可以封装那些在程序中可能要多次用到的模块。并可作为事件驱动的结果而调用的程序。从而实现一个函数把它与事件驱动相关联。这是与其它语言不样的地方。JavaScript函数的意义将脚本编写为函数，就可以避免页面载入时执行该脚本。函数包含着一些代码，这些代码只能被事件激活，或者在函数被调用时才会执行。你可以在页面中的任何位置调用脚本（如果函数嵌入一个外部的 .js 文件，那么甚至可以从其他的页面中调用）。创建函数的语法Funct

14、ion 函数名 （参数,变元）函数体;Return 表达式;说明当调用函数时,所用变量或字面量均可作为变元传递。函数由关键字Function定义。函数名：定义自己函数的名字。参数表，是传递给函数使用或操作的值，其值可以是常量 ，变量或其它表达式。通过指定函数名（实参）来调用一个函数。必须使用Return将值返回。函数名对大小写是敏感的。函数中的形式参数在函数的定义中，我们看到函数名后有参数表，这些参数变量可能是一个或几个。那么怎样才能确定参数变量的个数呢？在JavaScript中可通过arguments .Length来检查参数的个数。例：Function function_Name(exp1

15、,exp2,exp3,exp4)Number =function _Name . arguments .length;if (Number1）document.wrile(exp2);if (Number2)document.write(exp3);if(Number3)document.write(exp4);.JavaScript的date对象简介Date中文为日期的意思，Date继承自Object对象，此对象提供操作，显示日期与时间的函数Date对象构造函数Date对象具有多种构造函数。new Date()new Date(milliseconds)new Date(datestring

16、)new Date(year, month)new Date(year, month, day)new Date(year, month, day, hours)new Date(year, 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日的毫

17、秒数 datestring - 字符串代表的日期与时间。此字符串可以使用Date.parse()转换 year - 四位数的年份，如果取值为0-99，则在其之上加上1900 month - 0(代表一月)-11(代表十二月)之间的月份 day - 1-31之间的日期 hours - 0(代表午夜)-23之间的小时数 minutes - 0-59之间的分钟数 seconds - 0-59之间的秒数 microseconds - 0-999之间的毫秒数Date对象返回值如果没有任何参数，将返回当前日期 如果参数为一个数字，将数字视为毫秒值，转换为日期 如果参数为一个字符串，将字符串视为日期的字符串

18、表示，转换为日期 还可以使用六个构造函数精确定义，并返回时间示例var d1 = new Date();document.write(d1.toString();var d2 = new 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时间)的毫秒数(时间戳)

19、，我们在这里也把Date的内部表示形式称为时间戳。可以使用getTime()将Date对象转换为Date的时间戳，方法setTime()可以把Date的时间戳转换为Date的标准形式。Date函数使用语法date.方法名(参数1,参数2,.);Date.方法名();date代表一个日期对象的实例，Date代表日期对象，date.方法名调用的为对象的成员函数Date.方法名调用的为对象的静态函数示例var d=new Date();var d2=Date.UTC();任务总结本次任务我们使用JavaScript制作了一个基本的电子时钟特效。在制作该特效的过程中我们了解了DIV、SPAN这两个HT

20、ML标签，HTML套用CSS样式表样式的方法和JavaScript的函数的意义以及JavaScript中的date对象。我们将今天的知识点归纳如下：DIV和SPAN都是HTML中的块级元素，我们经常使用DIV或者SPAN进行web页面的排版，让内容分块显示。样式表（css）对页面元素样式的设置方式有三种：HTML标签（tag）定义、独立定义和id定义。JavaScript中，函数是几乎所有JavaScript 编写的有用的功能的核心。它除了和普通编程语言（如c）的函数有相同目的（减少编码量，一处定义，随处调用）之外，还可以避免页面载入时执行某些不希望页面载入时就执行的脚本date对象是Java

21、Script中用于存储、处理和操作日期的内置对象特别提醒：setTimeout (表达式,延时时间)：在执行时，是在载入后延迟指定时间后，去执行一次表达式，仅执行一次。附录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

22、等COLOR定义前景色#RGB 颜色的十六进制值BACKGROUND-COLOR定义背景色#RGB 颜色的十六进制值BACKGROUND-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文

23、字的装饰样式none,underline,overline,line-through|blinkVERTICAL-ALIGN垂直方向的位置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

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

25、ER-BOTTOM-WIDTH底端边框宽度thin,medium,thick,lengthBORDER-LEFT-WIDTH左端边框宽度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

26、-STYLE设置边框样式none,dotted,dash,solid等BORDER-COLOR设置边框颜色colorHEIGHT定义高度属性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-

27、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帮助helpda

28、te对象的方法列表方法描述Date()返回当日的日期和时间。getDate()从 Date 对象返回一个月中的某一天 (1 31)。getDay()从 Date 对象返回一周中的某一天 (0 6)。getMonth()从 Date 对象返回月份 (0 11)。getFullYear()从 Date 对象以四位数字返回年份。getYear()请使用 getFullYear() 方法代替。getHours()返回 Date 对象的小时 (0 23)。getMinutes()返回 Date 对象的分钟 (0 59)。getSeconds()返回 Date 对象的秒数 (0 59)。getMillis

29、econds()返回 Date 对象的毫秒(0 999)。getTime()返回 1970 年 1 月 1 日至今的毫秒数。getTimezoneOffset()返回本地时间与格林威治标准时间 (GMT) 的分钟差。getUTCDate()根据世界时从 Date 对象返回月中的一天 (1 31)。getUTCDay()根据世界时从 Date 对象返回周中的一天 (0 6)。getUTCMonth()根据世界时从 Date 对象返回月份 (0 11)。getUTCFullYear()根据世界时从 Date 对象返回四位数的年份。getUTCHours()根据世界时返回 Date 对象的小时 (0

30、 23)。getUTCMinutes()根据世界时返回 Date 对象的分钟 (0 59)。getUTCSeconds()根据世界时返回 Date 对象的秒钟 (0 59)。getUTCMilliseconds()根据世界时返回 Date 对象的毫秒(0 999)。parse()返回1970年1月1日午夜到指定日期（字符串）的毫秒数。setDate()设置 Date 对象中月的某一天 (1 31)。setMonth()设置 Date 对象中月份 (0 11)。setFullYear()设置 Date 对象中的年份（四位数字）。setYear()请使用 setFullYear() 方法代替。se

31、tHours()设置 Date 对象中的小时 (0 23)。setMinutes()设置 Date 对象中的分钟 (0 59)。setSeconds()设置 Date 对象中的秒钟 (0 59)。setMilliseconds()设置 Date 对象中的毫秒 (0 999)。setTime()以毫秒设置 Date 对象。setUTCDate()根据世界时设置 Date 对象中月份的一天 (1 31)。setUTCMonth()根据世界时设置 Date 对象中的月份 (0 11)。setUTCFullYear()根据世界时设置 Date 对象中的年份（四位数字）。setUTCHours()根据世

32、界时设置 Date 对象中的小时 (0 23)。setUTCMinutes()根据世界时设置 Date 对象中的分钟 (0 59)。setUTCSeconds()根据世界时设置 Date 对象中的秒钟 (0 59)。setUTCMilliseconds()根据世界时设置 Date 对象中的毫秒 (0 999)。toSource()返回该对象的源代码。toString()把 Date 对象转换为字符串。toTimeString()把 Date 对象的时间部分转换为字符串。toDateString()把 Date 对象的日期部分转换为字符串。toGMTString()请使用 toUTCString

33、() 方法代替。toUTCString()根据世界时，把 Date 对象转换为字符串。toLocaleString()根据本地时间格式，把 Date 对象转换为字符串。toLocaleTimeString()根据本地时间格式，把 Date 对象的时间部分转换为字符串。toLocaleDateString()根据本地时间格式，把 Date 对象的日期部分转换为字符串。UTC()根据世界时返回 1997 年 1 月 1 日 到指定日期的毫秒数。valueOf()返回 Date 对象的原始值。滚动公告任务目标我们在浏览一些企业的官方网站或者一些大型论坛的时候，时常可以在首页的左上角或者右上角发现一些

34、不断滚动的公告栏，这些公告栏会告诉我们最新最有用的信息，这次我们的任务就是要做一个这样的公告栏，如图：设计思路结构规划 滚动公告的结构设计思路大致如下：整体结构还是采用DIV+CSS由一个DIV来确定公告显示的范围和显示位置。而显示的样式由CSS样式表控制。在确定显示范围和显示位置的DIV内部嵌入一个DIV，并将要显示的内容书写在内嵌的DIV中，用于在结构上支持滚动效果的实现。滚动效果使用定时执行的JavaScript代码实现当鼠标移入公告板，则停止滚动；鼠标移出公告板，继续滚动；任务分析 要实现本次任务的特效，我们应掌握以下几个关键知识点的应用：window.setInterval ()方法

35、的使用；div的scrollTop属性使用；事件驱动；任务实施创建一个html文档作为本次任务的开发载体打开DreamWeaver，点击文件-新建，在弹出的新建文件对话框中选择html，点击创建生成一个html文档点击文件-保存，或直接按快捷键Ctrl+S将文档保存为“滚动公告.html”滚动公告面板的制作创建一个DIV作为确定滚动公告显示位置和显示范围的容器在body标签中间添加显示公告的容器div标签，并将其id属性设为：“gg_c”，用于确定公告显示的范围和显示位置在body标签之前加入style标签，书写div的样式表#gg_c height:100px; width:200px; o

36、verflow:hidden; text-indent:20px; font-size:12px; line-height:24px; border-color:#0F0; border-style:solid;在上一步创建的容器DIV中，创建一个DIV并加入公告内容在gg_c这个div中加入一个div标签，并将其id属性设为“gg1”，并在其中添加公告内容 女性好友生日，我们四个人商量零点发一条“生日快乐”给她，一人发一个字，我领到了第二个。 结果，他们都没发。 学生课间去厕所，拉完发现没带纸，又等不到人，手机又欠费。 绝望中他给10086打电话，请求帮助。 据说那边沉默了很久，后来他班同学

37、上课时收到了这样一条短信： 尊敬的中国移动用户你好，你的同学谁谁谁在厕所里，让你给他送手纸。详情请咨询10086早上起来看到一则网易评论，原文是截图 一楼：大家冷静一些，都过来，听听5楼怎么说？！ 二楼：我认为5楼说得很有道理。 三楼：5楼说出了人民群众的心声 四楼：5楼确实说的很好！ 五楼：楼上的都是SB 网易湖北宜昌网友7(221.233.*.*) 的原贴： 有一次我和老公吵了架心里很不舒服,趁老公熟睡的时候我蹲在他头部上方 准备放个屁给他闻闻好解气,谁料用力过猛直接把一堆屎拉在了他的脸上. 有一次下课打铃大家都要回家，下楼梯时我左脚踩到自己右脚，“啪” 地以大字型的姿势摔在了路中央.我当

38、时就想：不对，糗大了，我装晕。 结果我旁边的同学看我一动不动，赶紧扶起我，然后左右开打狂扇我耳光. 滚动效果的制作定义实现滚动效果的JavaScript函数定义在body标签中添加脚本标签 定义内容滚动的函数function upAndUp(container)var newScrollTop = container.scrollTop+1;container.scrollTop = newScrollTop; if(container.scrollTopnewScrollTop)container.scrollTop=0;函数说明：功能实现公告栏的滚动效果参数（container）显示公告的

39、容器返回值无函数体的具体意义：var newScrollTop = container.scrollTop+1;container.scrollTop = newScrollTop; 公告内容下移一个像素if(container.scrollTopnewScrollTop)container.scrollTop=0;如果移动到内容末尾，则将公告内容移动到开头书写定时调用内容滚动的函数定义function goUP(area,part1) var news=document.getElementById(area); var p1=document.getElementById(part1);

40、var newsT=0; news.onmouseover=function() clearInterval(newsT); news.onmouseout=function() newsT=window.setInterval(function()upAndUp(news),50); newsT=window.setInterval(function()upAndUp(news),50);脚本说明：函数goUP ()的作用定时调用内容滚动函数（每50毫秒调用一次内容滚动函数）参数（area）显示公告容器的id；（part1）存放公告内容的div的idgoUP ()函数的函数体说明：var n

41、ews=document.getElementById(area); var p1=document.getElementById(part1);获取公告容器div和存放公告内容的divvar newsT=0;用于存储计时器标识码的变量news.onmouseover=function() clearInterval(newsT); 当鼠标移入公告板，则停止滚动 news.onmouseout=function() newsT=window.setInterval(function()upAndUp(news),50);鼠标移出公告板，继续滚动newsT=window.setInterval(

42、function()upAndUp(news),50);启动计时器，每50毫秒调用一次滚动公告板的函数在body的结束标签之前书写调用goUP函数的JavaScript代码 goUP(gg_c,gg1);运行滚动公告.html能力拓展window. setTimeout ()方法和window.setInterval ()方法window 对象有两个主要的定时方法，分别是setTimeout 和 setInteval 他们的语法基本上相同，但是完成的功能取有区别：setTimeout方法是表示在一段时间以后执行指定代码,执行完了就结束。setInterval方法则是表示间隔一段时间反复执行某操

43、作。如果要清除计数器需要 根据使用的方法不同，调用不同的清除方法：例如：var tId=setTimeout(northsnow(),1000);clearTimeout(tId);或者：var iId=setInterval(northsnow(),1000);clearInteval(iId);div的scrollTop属性介绍scrollTop属性是什么? 有些情况下，“元素中内容”的高度会超过“元素本身”的高度，下面的演示中，外层元素的高度值是200px,内层元素的高度值是300px。很明显，“外层元素中的内容”高过了“外层元素”本身.当向下拖动滚动条时，有部分内容会隐没在“外层元素的

44、上边界”之外，scrollTop就等于这部分“不可见的内容”的高度。 这些文字显示在内层元素中。 解释： 内层元素的高度值300px 外层元素的高度值200px,因此“外层元素的内容”(也就是“内层元素”)无法完全显示，而外层元素把overflow设置为auto，因此外层元素的右侧会出现一个上下方向的滑动条 初始状态下，“内层元素的上边界”和“外层元素的上边界”重合，没有任何内容超过“外层元素的上边界”，此时scrollTop属性的值为0。 当向下拖动滚动条时，超过“外层元素的上边界”的内容会逐渐增多，scrollTop值就等于这些超出的部分。 当拖动滚动条到最底部时，“内层元素的下边界”和“

45、外层元素的下边界”重合，超过“外层元素的上边界”的内容的高度=300px-200px=100px，这也就是此时的scrollTop值。 前台web元素还有很多从不同层级来定义元素位置、尺寸的属性，我们将在附录中列出JavaScript的事件驱动基本概念JavaScript是基于对象(object-based)的语言。而基于对象的基本特征，就是采用事件驱动(event-driven)。通常鼠标或热键的动作我们称之为事件(Event)，而由鼠标或热键引发的一连串程序的动作，称之为事件驱动(Event Driver)。而对事件进行处理程序或函数，我们称之为事件处理程序(Event Handler)。

46、常用事件汇总JavaScript事件驱动中的事件是通过鼠标或热键的动作引发的。它主要有以下几个事件：单击事件onClick当用户单击鼠标按钮时，产生onClick事件。同时onClick指定的事件处理程序或代码将被调用执行。通常在下列基本对象中产生：button(按钮对象)checkbox(复选框)或(检查列表框)radio (单选钮)reset buttons(重要按钮)submit buttons(提交按钮)例：可通过下列按钮激活change()函数： 在onClick等号后，可以使用自己编写的函数作为事件处理程序，也可以使用JavaScript中内部的函数。还可以直接使用JavaScri

47、pt的代码等。例：Input type=button value= onclick=alert(这是一个例子）； onChange改变事件当利用text或texturea元素输入字符值改变时发该事件，同时当在select表格项中一个选项状态改变后也会引发该事件。例： 选中事件onSelect 当Text或Textarea对象中的文字被加亮后，引发该事件。获得焦点事件onFocus当用户单击Text或textarea以及select对象时，产生该事件。此时该对象成为前台对象。失去焦点onBlur当text对象或textarea对象以及select对象不再拥有焦点、而退到后台时，引发该文件，他与o

48、nFocas事件是一个对应的关系。载入文件onLoad当文档载入时，产生该事件。onLoad一个作用就是在首次载入一个文档时检测cookie的值，并用一个变量为其赋值，使它可以被源代码使用。卸载文件onUnload当Web页面退出时引发onUnload事件，并可更新Cookie的状态。任务总结本次任务我们使用JavaScript制作了一个滚动公告特效。在制作该特效的过程中我们了解了window.setInterval这个方法，并且和window.setTimeout方法进行了比较学习了解到它们之间的异同点；学习了div元素属性scrollTop的妙用，也知道了该属性的具体意义；还重点了解了什么

49、是JavaScript的事件驱动和事件驱动的具体应用。我们将今天的知识点归纳如下：window.setInterval和window.setTimeout都是延时执行指定代码的方法，实现的是一种计时器的功能，但window.setTimeout只延迟执行一次指定代码，而window.setInterval则是反复延迟执行指定语句。div的scrollTop属性指的是垂直滚动条相对于div中实际内容顶端的位置。使用JavaScript代码对该属性的控制来确定div显示的内容。事件驱动是JavaScript的重要概念，它是在我们使用鼠标或键盘对web页面中某个元素进行操作的时候产生事件，我们通过事

50、先定义的函数来对特定元素的特定事件进行响应。附录前台web元素定义元素位置、尺寸的属性列表属性名属性说明offsetHeight获取对象相对于版面或由父坐标 offsetParent 属性指定的父坐标的高度。offsetLeft获取对象相对于版面或由 offsetParent 属性指定的父坐标的计算左侧位置。offsetParent获取定义对象 offsetTop 和 offsetLeft 属性的容器对象的引用。offsetTop获取对象相对于版面或由 offsetTop 属性指定的父坐标的计算顶端位置。offsetWidth获取对象相对于版面或由父坐标 offsetParent 属性指定的父

51、坐标的宽度。scrollHeight获取对象的滚动高度。scrollLeft设置或获取位于对象左边界和窗口中目前可见内容的最左端之间的距离。scrollTop设置或获取位于对象最顶端和窗口中可见内容的最顶端之间的距离。scrollWidth获取对象的滚动宽度。浮动效果任务目标经常上网的人肯定都会发现自己浏览的网页上有很多浮动的广告，浮动广告的确让网页的浏览者感到厌恶，但浮动效果在很多企业的主页上却有着非常重要的作用，比如很多大型企业的客服网站都是用浮动效果来实现在线客服的功能。本次任务，我们就要来实现一个在线客服的浮动效果，如图：设计思路结构规划 浮动效果的结构设计思路大致如下：整体结构还是采

52、用DIV+CSS一个DIV来装载将要浮动的内容。其样式由CSS样式表控制。本示例中，装载浮动内容的DIV内部又以三个DIV来对显示内容进行排版；第一个div负责显示浮动内容的页头标志；第二个div负责显示在线客服的链接；第三个div负责显示浮动内容的页脚标志浮动效果使用定时执行的JavaScript代码对装载浮动内容的DIV进行位置调整来实现任务分析 本次任务所涉及的知识点和滚动公告任务相似，是滚动公告任务的进阶应用。要注意的就是JavaScript函数内定义函数的理解任务实施创建一个html文档作为本次任务的开发载体打开DreamWeaver，点击文件-新建，在弹出的新建文件对话框中选择ht

53、ml，点击创建生成一个html文档点击文件-保存，或直接按快捷键Ctrl+S将文档保存为“浮动效果.html”制作浮动元素创建一个DIV作为装载浮动内容的容器在body标签中间添加装载浮动内容的容器div标签，并将其id属性设为：“qq_online”，用于装载浮动内容在body标签之前加入style标签，书写div的样式表#qq_onlinewidth:110px;background:url(images/qq_middle.gif) repeat-y;text-align:center;position:absolute;font-size:12px;top:0px;right:20px

54、;Z-INDEX: 99999;#qq_online imgvertical-align:middle;border:none;vertical-align:middle;#qq_online atext-decoration:none;color:#000000;font-size:12px;样式表说明： 我们利用以前学习的有关样式表的知识可知，在上面的样式表中，样式表#qq_onlinewidth:110px;background:url(images/qq_middle.gif) repeat-y;text-align:center;position:absolute;font-size

55、:12px;top:0px;right:20px;Z-INDEX: 99999;限定的是id为qq_online的web元素的显示样式，而#qq_online imgvertical-align:middle;border:none;vertical-align:middle;#qq_online atext-decoration:none;color:#000000;font-size:12px;又是限定什么元素样式的呢？从样式表的定义中我们看到“#qq_online”说明该样式表还是限定的id为qq_online的web元素的显示样式，但从“#qq_online”后面的限定语句“img”和

56、“a”，我们可以看出，这两个样式表只限定在id为qq_online的web元素中标签为“img”的子元素和标签为“a”的子元素的样式在qq_online这个div中加入三个div标签，并将中间一个div的id属性设为“qq_cont”，并在其中添加在线客服的链接地址 在线客服1 在线客服2 制作浮动效果书写实现浮动效果的JavaScript代码在body标签中添加脚本标签 定义实现浮动效果的函数/qqonlinefunction floatQQ(obj,n) var startY=10; var endY=n; var tag=document.getElementById(obj); /浮动

57、层定位函数 function getD() var dtop=Number(document.body.scrollTop | document.documentElement.scrollTop); startY+=(endY+dtop-startY)*0.1; tag.style.top=startY+px; var qq=setInterval(function()getD(),30);函数说明：功能实现在线帮助的浮动效果参数（obj）需要浮动的web元素的id；（n）需要浮动的web元素（以下简称浮动元素）的与web窗口顶端的距离返回值无函数体的具体意义：var startY=10;定

58、义浮动元素的移动起点坐标（为实现移动的效果而设置一个浮动元素开始移动的位置）var endY=n; 定义浮动元素的移动终点坐标var tag=document.getElementById(obj);获取浮动元素对象/浮动层定位函数 function getD() var dtop=Number(document.body.scrollTop | document.documentElement.scrollTop); startY+=(endY+dtop-startY)*0.1; tag.style.top=startY+px; 定义移动浮动元素的函数该函数是定义在另一个JavaScript

59、的函数内部，关于这样的函数，我们会在接下来的能力拓展中详细介绍。下面具体说一下内定义函数的作用：var dtop=Number(document.body.scrollTop | document.documentElement.scrollTop);获取位移的偏移量（即要移动到距离web窗口顶端endY处的位置，除了移动endY个像素之后，还要移动的距离）。startY+=(endY+dtop-startY)*0.1;tag.style.top=startY+px;本次需要移动的距离（该函数是要实现浮动元素的移动效果，因此实际我们是通过反复调用该函数使浮动元素在界面上看起来是平滑的移动到指定

60、位置，而不是突然就跳到该位置的）内定义函数说明完毕var qq=setInterval(function()getD(),30);每隔30毫秒执行一次内定义函数，使浮动元素实现平滑移动的效果在我们之前的浮动元素下面加入一组回车换行标签越多越好，目的是撑大web页面，使其产生滚动条，以演示浮动效果在标签后加入调用floatQQ函数的代码floatQQ(qq_online,50);运行浮动效果.html能力拓展JavaScript函数中再定义函数window 对象有两个主要的定时方法，分别是setTimeout 和 setInteval 他们的语法基本上相同，但是完成的功能取有区别：setTime