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”
<div id="showtime">
</div>
➢div标签简介：
<div> 是一个块级元素。

这意味着它的内容自动地开始一个新行。

实际上，换
行是 <div> 固有的唯一格式表现。

可以通过 <div> 的 class 或 id 应用额外的样
式。

不必为每一个 <div> 都加上类或 id，虽然这样做也有一定的好处。

可以对同一个 <div> 元素应用 class 或 id 属性，但是更常见的情况是只应用其中一种。

这两者的主要差异是，class 用于元素组（类似的元素，或者可以理解
为某一类元素），而 id 用于标识单独的唯一的元素。

2)在showtime这个div中加入一个span标签，并将其id属性设为“localtime”，用
于放置显示内容
<div id="showtime">
时间:<span id="localtime"></span>
3)在body标签之前加入style标签，书写div和span的样式表
<style type="text/css">
#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:10px;
color:#CCC;
}
</style>
4)书写实现电子时钟效果的JavaScript代码
➢在body标签中添加脚本标签
<script language="javascript"> </script>
说明：script标签不一定非要在body标签中添加，他摆放的位置比较灵活。

➢定义生成时间字符串的函数
<script language="javascript">
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(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+=week;//如果不显示星期,只需把这行注释掉
if(hh<10) hh = '0' + hh;
if(mm<10) mm = '0' + mm;
if(ss<10) ss = '0' + ss;
str += " " + hh + ":" + mm + ":" + ss;
return(str);
}
</script>
函数说明：
功能——将传入的时间对象转换为特定格式的字符串
参数——（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="星期六";
else week="星期日";
——根据之前得到的日期计算应显示为星期几
str =(objD.getYear()) +"年";
str+=(objD.getMonth() + 1) + "月" + objD.getDate() +"日";
——生成日期字符串
str+=week;
——加入星期字符串
if(hh<10) hh = '0' + hh;
if(mm<10) mm = '0' + mm;
if(ss<10) ss = '0' + ss;
——将时间字符串进行格式化，保证时、分、秒都由两位字符显示str += " " + hh + ":" + mm + ":" + ss;
——加入完成格式化的时、分、秒
return(str);
——返回生成的字符串
➢书写定时启动，获取当前时间的JavaScript脚本代码
<script language="javascript">
……
function tick()
{
var today;
today = new Date();
document.getElementById("localtime").innerText = showLocale(today);
window.setTimeout("tick()", 1000);
}
tick();
</script>
脚本说明：
函数tick()的作用——定时启动，获取当前时间
tick();——调用、激活tick()函数的脚本语句；
tick()函数的函数体说明：
var today;
——定义变量，将来它的值便是当前系统时间
today = new Date();
——获取当前系统时间
document.getElementById("localtime").innerText = showLocale(today);
——调用showLocale()函数生成时间字符串，并将其作为内容加入span标签
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来检查参数的个数。

1.4.2JavaScript的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, 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 - 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 = 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时间)
的毫秒数(时间戳)，我们在这里也把Date的内部表示形式称为时间戳。

可以使
用getTime()将Date对象转换为Date的时间戳，方法setTime()可以把Date
的时间戳转换为Date的标准形式。

➢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和SPAN都是HTML中的块级元素，我们经常使用DIV或者SPAN进行web 页面的排版，让内容分块显示。

➢样式表（css）对页面元素样式的设置方式有三种：HTML标签（tag）定义、独立定义和id定义。

➢JavaScript中，函数是几乎所有JavaScript 编写的有用的功能的核心。

它除了和普通编程语言（如c）的函数有相同目的（减少编码量，一处定义，随处调用）之外，还可以避免页面载入时执行某些不希望页面载入时就执行的脚本
➢date对象是JavaScript中用于存储、处理和操作日期的内置对象
➢特别提醒：setTimeout (表达式,延时时间)：在执行时，是在载入后延迟指定时间后，去执行一次表达式，仅执行一次。

1.6附录1.6.3css常用属性大全
1.6.4date对象的方法列表
学习情境2 滚动公告
2.1任务目标
我们在浏览一些企业的官方网站或者一些大型论坛的时候，时常可以在首页的左上角或者右上角发现一些不断滚动的公告栏，这些公告栏会告诉我们最新最有用的信息，这次我们的任务就是要做一个这样的公告栏，如图：
2.2设计思路
2.2.5结构规划
滚动公告的结构设计思路大致如下：
➢整体结构还是采用DIV+CSS
➢由一个DIV来确定公告显示的范围和显示位置。

而显示的样式由CSS样式表控制。

➢在确定显示范围和显示位置的DIV内部嵌入一个DIV，并将要显示的内容书写在内嵌的DIV中，用于在结构上支持滚动效果的实现。

➢滚动效果使用定时执行的JavaScript代码实现
➢当鼠标移入公告板，则停止滚动；鼠标移出公告板，继续滚动；
2.2.6任务分析
要实现本次任务的特效，我们应掌握以下几个关键知识点的应用：
1window.setInterval ()方法的使用；
2div的scrollTop属性使用；
3事件驱动；
2.3任务实施
2.3.7创建一个html文档作为本次任务的开发载体
➢打开DreamWeaver，点击文件->新建，在弹出的新建文件对话框中选择html，点击创建生成一个html文档
➢点击文件->保存，或直接按快捷键Ctrl+S将文档保存为“滚动公告.html”
2.3.8滚动公告面板的制作
1)创建一个DIV作为确定滚动公告显示位置和显示范围的容器
➢在body标签中间添加显示公告的容器——div标签，并将其id属性设为：“gg_c”，用于确定公告显示的范围和显示位置
<div id=" gg_c">
</div>
➢在body标签之前加入style标签，书写div的样式表
<style type="text/css">
#gg_c{
height:100px;
width:200px;
overflow:hidden;
text-indent:20px;
font-size:12px;
line-height:24px;
border-color:#0F0;
border-style:solid;
}
</style>
2)在上一步创建的容器DIV中，创建一个DIV并加入公告内容
➢在gg_c这个div中加入一个div标签，并将其id属性设为“gg1”，并在其中添加公告内容
<div id="gg_c">
<div id="gg1">
<p>女性好友生日，我们四个人商量零点发一条“生日快乐”给她，一人发一个字，我领到了第二个。

<br>
结果，他们都没发。

</p>
<p>学生课间去厕所，拉完发现没带纸，又等不到人，手机又欠费。

<br>
绝望中他给10086打电话，请求帮助。

<br>
据说那边沉默了很久，后来……他班同学上课时收到了这样一条短信：<br>
尊敬的中国移动用户你好，你的同学谁谁谁在厕所里，让你给他送手纸。

详情请咨询10086</p>
<p>早上起来看到一则网易评论，原文是截图<br>
一楼：大家冷静一些，都过来，听听5楼怎么说？！~ <br>
二楼：我认为5楼说得很有道理。

<br>
三楼：5楼说出了人民群众的心声<br>
四楼：5楼确实说的很好！<br>
五楼：楼上的都是SB</p>
<p>网易湖北宜昌网友[7](221.233.*.*) 的原贴：<br>
有一次我和老公吵了架心里很不舒服,趁老公熟睡的时候我蹲在他头部上方<br>
准备放个屁给他闻闻好解气,谁料用力过猛直接把一堆屎拉在了他的脸上.</p>
<p>有一次下课打铃大家都要回家，下楼梯时我左脚踩到自己右脚，“啪”<br>
地以大字型的姿势摔在了路中央..我当时就想：不对，糗大了，我装晕。

<br>
结果我旁边的同学看我一动不动，赶紧扶起我，然后左右开打狂扇我耳光...</p>
</div>
</div>
2.3.9滚动效果的制作
1)定义实现滚动效果的JavaScript函数定义
➢在body标签中添加脚本标签
<script language="javascript"> </script>
➢定义内容滚动的函数
<script language="javascript">
function upAndUp(container){
var newScrollTop = container.scrollTop+1;
container.scrollTop = newScrollTop;
if(container.scrollTop<newScrollTop){
container.scrollTop=0;
}
}
</script>
函数说明：
功能——实现公告栏的滚动效果
参数——（container）显示公告的容器
返回值——无
函数体的具体意义：
var newScrollTop = container.scrollTop+1;
container.scrollTop = newScrollTop;
——公告内容下移一个像素
if(container.scrollTop<newScrollTop){
container.scrollTop=0;
}
——如果移动到内容末尾，则将公告内容移动到开头
➢书写定时调用内容滚动的函数定义
<script language="javascript">
……
function goUP(area,part1){
var news=document.getElementById(area);
var p1=document.getElementById(part1);
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);
}
</script>
脚本说明：
函数goUP ()的作用——定时调用内容滚动函数（每50毫秒调用一次内容滚动函数）
参数——（area）显示公告容器的id；（part1）存放公告内容的div的id
goUP ()函数的函数体说明：
var news=document.getElementById(area);
var p1=document.getElementById(part1);
——获取公告容器div和存放公告内容的div
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);
——启动计时器，每50毫秒调用一次滚动公告板的函数
2)在body的结束标签之前书写调用goUP函数的JavaScript代码
<script type="text/javascript">
goUP("gg_c","gg1");
</script>
2.3.10运行滚动公告.html
2.4能力拓展
2.4.1window. setTimeout ()方法和window.setInterval ()方法
window 对象有两个主要的定时方法，分别是setTimeout 和setInteval 他们的语法基本上相同，但是完成的功能取有区别：
➢setTimeout方法是表示在一段时间以后执行指定代码,执行完了就结束。

➢setInterval方法则是表示间隔一段时间反复执行某操作。

➢如果要清除计数器需要根据使用的方法不同，调用不同的清除方法：例如：var tId=setTimeout('northsnow()',1000);
clearTimeout(tId);
或者：
var iId=setInterval('northsnow()',1000);
clearInteval(iId);
2.4.2div的scrollTop属性介绍
scrollTop属性是什么? 有些情况下，“元素中内容”的高度会超过“元素本身”的高度，下面的演示中，外层元素的高度值是200px,内层元素的高度值是300px。

很明显，“外层元素中的内容”高过了“外层元素”本身.当向下拖动滚动条时，有部分内容会隐没在“外层元素的上边界”之外，scrollTop就等于这部分“不可见的内容”的高度。

<html>
<body>
<div style="width:200px;height:200px;background-color:#999999;overflow:auto;"
id="外层元素">
<div style="width:100px;height:300px;background-color:#FFFF00;" id="内层元素">
这些文字显示在内层元素中。

</div>
</div>
</body>
</html>
解释：
内层元素的高度值300px > 外层元素的高度值200px,因此“外层元素的内容”(也就是“内层元素”)无法完全显示，而外层元素把overflow设置为auto，因此外层元素的右侧会出现一个上下方向的滑动条
初始状态下，“内层元素的上边界”和“外层元素的上边界”重合，没有任何内容超过“外层元素的上边界”，此时scrollTop属性的值为0。

当向下拖动滚动条时，超过“外层元素的上边界”的内容会逐渐增多，scrollTop 值就等于这些超出的部分。

当拖动滚动条到最底部时，“内层元素的下边界”和“外层元素的下边界”重合，超过“外层元素的上边界”的内容的高度=300px-200px=100px，这也就是此时的scrollTop 值。

前台web元素还有很多从不同层级来定义元素位置、尺寸的属性，我们将在附录中列出
2.4.3JavaScript的事件驱动
2.4.
3.1 基本概念
JavaScript是基于对象(object-based)的语言。

而基于对象的基本特征，就是采用事件驱动(event-driven)。

通常鼠标或热键的动作我们称之为事件(Event)，而由鼠标或热键引发的一连串程序的动作，称之为事件驱动(Event Driver)。

而对事件进行处理程序或函数，我们称之为事件处理程序(Event Handler)。

2.4.
3.2 常用事件汇总
JavaScript事件驱动中的事件是通过鼠标或热键的动作引发的。

它主要有以下几个事件：➢单击事件onClick
当用户单击鼠标按钮时，产生onClick事件。

同时onClick指定的事件处理程序或代码将被调用执行。

通常在下列基本对象中产生：
✧button(按钮对象)
✧checkbox(复选框)或(检查列表框)
✧radio (单选钮)
✧reset buttons(重要按钮)
✧submit buttons(提交按钮)
例：可通过下列按钮激活change()函数：
<Form>
<Inpu t type="button" Value=“ ” onClick="change()">
</Form>
在onClick等号后，可以使用自己编写的函数作为事件处理程序，也可以使用JavaScript中内部的函数。

还可以直接使用JavaScript的代码等。

例：
<Input type="button" value=" " onclick=alert("这是一个例子"）；
➢onChange改变事件
当利用text或texturea元素输入字符值改变时发该事件，同时当在select表格项中一个选项状态改变后也会引发该事件。

例：
<Form>
<Input type="text" name="Test" value="Test" onCharge="check('this.test)"> </Form>
➢选中事件onSelect
当Text或Textarea对象中的文字被加亮后，引发该事件。

➢获得焦点事件onFocus
当用户单击Text或textarea以及select对象时，产生该事件。

此时该对象成为前台对象。

➢失去焦点onBlur
当text对象或textarea对象以及select对象不再拥有焦点、而退到后台时，引发该文件，他与onFocas事件是一个对应的关系。

➢载入文件onLoad
当文档载入时，产生该事件。

onLoad一个作用就是在首次载入一个文档时检测cookie的值，并用一个变量为其赋值，使它可以被源代码使用。

➢卸载文件onUnload
当Web页面退出时引发onUnload事件，并可更新Cookie的状态。

2.5任务总结
本次任务我们使用JavaScript制作了一个滚动公告特效。

在制作该特效的过程中我们了解了window.setInterval这个方法，并且和window.setTimeout方法进行了比较学习了解到它们之间的异同点；学习了div元素属性scrollTop的妙用，也知道了该属性的具体意义；还重点了解了什么是JavaScript的事件驱动和事件驱动的具体应用。

我们将今天的知识点归纳如下：
➢window.setInterval和window.setTimeout都是延时执行指定代码的方法，实现的是一种计时器的功能，但window.setTimeout只延迟执行一次指定代码，而
window.setInterval则是反复延迟执行指定语句。

➢div的scrollTop属性指的是垂直滚动条相对于div中实际内容顶端的位置。

使用JavaScript代码对该属性的控制来确定div显示的内容。

➢事件驱动是JavaScript的重要概念，它是在我们使用鼠标或键盘对web页面
中某个元素进行操作的时候产生事件，我们通过事先定义的函数来对特定元
素的特定事件进行响应。

2.6附录
2.6.1前台web元素定义元素位置、尺寸的属性列表
学习情境3 浮动效果
3.1任务目标
经常上网的人肯定都会发现自己浏览的网页上有很多浮动的广告，浮动广告的确让网页的浏览者感到厌恶，但浮动效果在很多企业的主页上却有着非常重要的作用，比如很多大型企业的客服网站都是用浮动效果来实现在线客服的功能。

本次任务，我们就要来实现一个在线客服的浮动效果，如图：
3.2设计思路
3.2.1结构规划
浮动效果的结构设计思路大致如下：
➢整体结构还是采用DIV+CSS
➢一个DIV来装载将要浮动的内容。

其样式由CSS样式表控制。

➢本示例中，装载浮动内容的DIV内部又以三个DIV来对显示内容进行排版；第一个div负责显示浮动内容的页头标志；第二个div负责显示在线客服的链接；
第三个div负责显示浮动内容的页脚标志
➢浮动效果使用定时执行的JavaScript代码对装载浮动内容的DIV进行位置调整来实现
3.2.2任务分析
➢本次任务所涉及的知识点和滚动公告任务相似，是滚动公告任务的进阶应用。

要注意的就是JavaScript函数内定义函数的理解
3.3任务实施
3.3.1创建一个html文档作为本次任务的开发载体
➢打开DreamWeaver，点击文件->新建，在弹出的新建文件对话框中选择html，点击创建生成一个html文档
➢点击文件->保存，或直接按快捷键Ctrl+S将文档保存为“浮动效果.html”
3.3.2制作浮动元素
1)创建一个DIV作为装载浮动内容的容器
➢在body标签中间添加装载浮动内容的容器——div标签，并将其id属性设为：“qq_online”，用于装载浮动内容
<div id=" qq_online">
</div>
➢在body标签之前加入style标签，书写div的样式表
<style type="text/css">
#qq_online{
width:110px;
background:url(images/qq_middle.gif) repeat-y;
text-align:center;
position:absolute;
font-size:12px;
top:0px;
right:20px;
Z-INDEX: 99999;
}
#qq_online img{
vertical-align:middle;
border:none;
vertical-align:middle;
}
#qq_online a{
text-decoration:none;
color:#000000;
font-size:12px;
}
</style>
➢在qq_online这个div中加入三个div标签，并将中间一个div的id属性设为“qq_cont”，并在其中添加在线客服的链接地址
<div id="qq_online">
<div>
<img src="images/qq_top.gif" />
</div>
<div class="qq_cont">
<a target=blank
href=tencent://message/?uin=981371569&Site=&Menu=yes><img
src="images/qq.gif" />在线客服1</a><br />
<a target=blank
href=tencent://message/?uin=1019102535&Site=&Menu=yes><img
src="images/qq.gif" />在线客服2</a>
</div>
<div>
<img src="images/qq_bottom.gif" />
</div>
</div>
3.3.3制作浮动效果
1)书写实现浮动效果的JavaScript代码
➢在body标签中添加脚本标签
<script language="javascript"> </script>
➢定义实现浮动效果的函数
<script language="javascript">
//qqonline
function floatQQ(obj,n){
var startY=10;
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";
}
var qq=setInterval(function(){getD()},30);
}
函数说明：
功能——实现在线帮助的浮动效果
参数——（obj）需要浮动的web元素的id；（n）需要浮动的web元素（以下简称浮动元素）的与web窗口顶端的距离
返回值——无
函数体的具体意义：
var startY=10;
——定义浮动元素的移动起点坐标（为实现移动的效果而设置一个浮动元素开始移动的位置）
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";
}
——定义移动浮动元素的函数
下面具体说一下内定义函数的作用：
var dtop=Number(document.body.scrollTop ||
document.documentElement.scrollTop);
——获取位移的偏移量（即要移动到距离web窗口顶端endY处的位置，除了移动endY个像素之后，还要移动的距离）。

startY+=(endY+dtop-startY)*0.1;
tag.style.top=startY+"px";
——本次需要移动的距离（该函数是要实现浮动元素的移动效果，因此实际我们是通过反复调用该函数使浮动元素在界面上看起来是平滑的移动到指定位置，而不是突然就跳到该位置的）
----------------------------------内定义函数说明完毕---------------------------------------- var qq=setInterval(function(){getD()},30);
——每隔30毫秒执行一次内定义函数，使浮动元素实现平滑移动的效果2)在我们之前的浮动元素下面加入一组回车换行标签<p>
越多越好，目的是撑大web页面，使其产生滚动条，以演示浮动效果
3)在<p>标签后加入调用floatQQ函数的代码
<script type="text/javascript">
floatQQ('qq_online',50);
</script>
3.3.4运行浮动效果.html
3.4能力拓展
3.4.1JavaScript函数中再定义函数
window 对象有两个主要的定时方法，分别是setTimeout 和setInteval 他们的语法基本上相同，但是完成的功能取有区别：
➢setTimeout方法是表示在一段时间以后执行指定代码,执行完了就结束。

➢setInterval方法则是表示间隔一段时间反复执行某操作。

➢如果要清除计数器需要根据使用的方法不同，调用不同的清除方法：例如：var tId=setTimeout('northsnow()',1000);
clearTimeout(tId);
或者：
var iId=setInterval('northsnow()',1000);
clearInteval(iId);
3.5任务总结
➢本次任务我们使用JavaScript制作了一个浮动的特效。

在制作该特效的过程中我们重新巩固和复习了公告板任务的知识点，并且我们也了解到了一个新的定义函数的形式——在函数内定义函数。

3.6附录
3.6.1Body的常用属性列表
属性名属性说明
background 设置或获取页面上文本和图像后平铺的背景图片。

bgcolor 设置或获取对象后面的背景颜色。

class 设置或获取对象的样式。

学习情境4 省市级联
4.1任务目标
当你在某个一网站填写用户注册信息的时候，你是不是会遇到系统要求你选择所在省市，之后再选择所在区县？我们在选择所在省市、区县的时候会发现这样一个有趣的现象：当你选择了某个省市（例如重庆），那么在所在区县选择框就只会出现该省市下辖的区县，而不会出现其他省市所辖区县的名字（例如选择了重庆，那么在区县中就不会出现德阳、绵羊、韶关这样的城市）。

那么我们的web页面是如何根据用户选择的省市来确定具体的区县呢？本次任务我们就来实现这样的功能。

本次任务目标——制作一个省市级联效果如图：
4.2设计思路
4.2.2结构规划
浮动效果的结构设计思路大致如下：
➢由一个form表单作为下拉选择菜单的容器
➢需要两个下拉菜单，一个供用户选择所属省市，一个供用户选择所属区县。

➢另外建立一个span标签显示操作结果，以此检测我们js代码的正确性
➢省市级联效果由JavaScript通过事件驱动实现。