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”
2)在showtime这个div中加入一个span标签，并将其id属性设为“localtime”，用
于放置显示内容
时间:
3)在body标签之前加入style标签，书写div和span的样式表
4)书写实现电子时钟效果的JavaScript代码
在body标签中添加脚本标签
说明：script标签不一定非要在body标签中添加，他摆放的位置比较灵活。
定义生成时间字符串的函数
函数说明：
功能——将传入的时间对象转换为特定格式的字符串
参数——（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脚本代码
脚本说明：
函数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”，用于确定公告显示的范围和显示位置
在body标签之前加入style标签，书写div的样式表
2)在上一步创建的容器DIV中，创建一个DIV并加入公告内容
在gg_c这个div中加入一个div标签，并将其id属性设为“gg1”，并在其中添加公告内容
女性好友生日，我们四个人商量零点发一条“生日快乐”给她，一人发一个字，我领到了第二个。
结果，他们都没发。
学生课间去厕所，拉完发现没带纸，又等不到人，手机又欠费。
绝望中他给10086打电话，请求帮助。。。
据说那边沉默了很久，后来……他班同学上课时收到了这样一条短信：
尊敬的中国移动用户你好，你的同学谁谁谁在厕所里，让你给他送手纸。详情请咨询10086
早上起来看到一则网易评论，原文是截图
一楼：大家冷静一些，都过来，听听5楼怎么说？！~
二楼：我认为5楼说得很有道理。
三楼：5楼说出了人民群众的心声
四楼：5楼确实说的很好！
五楼：楼上的都是SB
网易湖北宜昌网友[7](221.233.*.*) 的原贴：
有一次我和老公吵了架心里很不舒服,趁老公熟睡的时候我蹲在他头部上方
准备放个屁给他闻闻好解气,谁料用力过猛直接把一堆屎拉在了他的脸上.
有一次下课打铃大家都要回家，下楼梯时我左脚踩到自己右脚，“啪”
地以大字型的姿势摔在了路中央..我当时就想：不对，糗大了，我装晕。
结果我旁边的同学看我一动不动，赶紧扶起我，然后左右开打狂扇我耳光...
2.3.9滚动效果的制作
1)定义实现滚动效果的JavaScript函数定义
在body标签中添加脚本标签
定义内容滚动的函数
函数说明：
功能——实现公告栏的滚动效果
参数——（container）显示公告的容器
返回值——无
函数体的具体意义：
var newScrollTop = container.scrollTop+1;
container.scrollTop = newScrollTop;
——公告内容下移一个像素
if(container.scrollTop container.scrollTop=0; } ——如果移动到内容末尾，则将公告内容移动到开头 书写定时调用内容滚动的函数定义 脚本说明： 函数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代码 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就等于这部分“不可见的内容”的高度。
id="外层元素">
这些文字显示在内层元素中。
网页设计模拟题三 一、单项选择题 1.HTML文本显示状态代码中,表示?（） A文本加注下标线 B文本加注上标线 C文本闪烁 D文本或图片居中 2.动态HTML中设定路径移动时间的属性是？（） A.Bounce B.Duration C.Repeat D.Target 3.下面CGI脚本中的通用格式和content-types不是一一对应的是哪一项？（） A.HTML与text/html B.Text与text/plain C.GIF与image/gif D.MPEG与image/jpeg 4.下列对CSS内容表述不正确的一项是？（） A伪类和伪元素不应用HTML的CLASS属性来指定 B一般的类不可以与伪类和伪元素一起使用 C一个已访问连接可以定义为不同颜色的显示 D一个已访问连接可以定义为不同字体大小和风格 5.用户可以在（）命令的动作中见到canAcceptCommand。 A. Sort Table B. Format Table C. Set Color Scheme D. Clean Up HTML 6.创建一个滚动菜单的HTML代码是？（） A.
B. C.