4：JavaScriptjavaDOM

JavaScript制作页面特效课后练习
1．在某页面中有一个图片和五个超链接，如下图所示，单击不同的数字超链接显示不同的
图片：
图1 图片幻灯片显示效果
提示：
（1）默认显示一个图片，五个超链接调用同一个传参函数，参数设置为显示图片的名称。

（2）使用“对象名.属性值”或setAttribute()的方式改变图片的名称。

2．做一个模仿删除用户的页面，功能如下：
默认情况下，在一个Table 里面放置若干用户信息，后面有“删除”链接：
图2 模仿删除用户的页面效果1
点击“删除”链接，弹出对话框，提示用户是否继续操作：
图3 模仿删除用户的页面效果2
用户点击确定后，要删除的一行，自动加上删除线，表示处于删除状态：
图4 模仿删除用户的页面效果3
提示：
（1）使用confirm 弹出确认框，如果用户点击“确定”，则返回true，进行下一步操作；
（2）定义一个类样式，用来标识删除状态，如果用户点击了“确定”按钮之后，该行所对
应的tr 标签，自动应用该类样式。

3．做一个横向导航菜单，并且每一项均包含一个二级的菜单，效果图如下：
图5 横向导航菜单
当鼠标不在菜单上时，二级菜单不显示，当鼠标移动到任一项上时，显示该项对应的二级菜
单。

提示：
（1）使用对象的display 属性可以控制对象的显示与隐藏；
（2）使用相对定位/绝对定位来控制二级菜单的显示位置；
（3）使用鼠标的两个事件（onmouseove/onmouseout）来触发控制函数。

4．做一个横向不间断滚动的特效，效果图如下：
图6 图片横向滚动特效
要求：图片始终横向向左滚动，并且每一张图片首尾相连，不存在间断。

提示：
（1）若要使图片不间断，则需要将图片列表重复一次，这样第一遍的末尾图片和第二遍的
开始图片就能相连了，即使用innerHTML 属性让图片内容翻倍；（2）使用setInterval()方法，可以控制一个函数每隔多少毫秒执行一次；
（3）使用绝对定位与相对定位结合，可以使图片所在的层相对于父层的位置可控，方便随
着计时器的执行，left 的值递减；
（4）当left 的值递减到原内容的宽度时，则让left 重新归零，这样不会发生视觉上的变
化。

5．制作一个网易邮箱登录的页面，在默认状态下，左面“163 免费邮”高亮显示，同时，
右侧内容是显示的蓝色风格的“登陆163 免费邮箱”的界面，效果图如下：
图7 网易邮箱登录页面1
当用户点击左侧“126 免费邮”的时候，左面“126 免费邮”高亮显示，同时右侧显示绿色
风格的“登陆126 免费邮箱”的界面，效果图如下：
图8 网易邮箱登录页面2
当用户点击左侧“126 免费邮”的时候，左面“126 免费邮”高亮显示，同时右侧显示绿色
风格的“登陆126 免费邮箱”的界面，效果图如下：
图9 网易邮箱登录页面3
提示:
（1）点击左侧选项时，可以改变选项的className 属性，从而实现
左侧选项风格的变化，
同时，根据用户点击的选项，来判断右侧应该显示的内容；
（2）右侧登陆区域，同样可以根据className 属性进行风格的控制；（3）使用下拉列表项的selected 属性，可以控制下拉列表当前选中的项目。

6．做一个树形菜单，效果图如下：
图10 树形菜单
要求：当用户点击大类或者大类前面的图片时，该类下面的子项由可见变成不可见，或者由
不可见编程可见，同时，大类前面的小图标由减号变成加号，或者由加号变成减号。

提示：
（1）使用对象的display 属性控制对象的显示与隐藏；
（2）获取子项是否处在显示状态，如果当前处在显示状态，则隐藏子项，否则显示子项；
使用图片标签的src 属性，控制要显示的图片url 地址。

7．做一个百度知道页面，具体要求如下：
打开网页，右下角显示“欢迎牌”，效果如下所示：
图11 百度知道页面1
当窗口滚动条滚动或者尺寸发生改变时，“欢迎牌”始终保持显示在页面的右下角。

当点击“欢迎牌”右上角的“最小化”图标时，“欢迎牌”内容隐藏，同时“最小化”按钮
图标变成“最大化”按钮图标，如下图所示：
图12 百度知道页面2
当点击页面右上角“注册”或者“登陆”时，在屏幕中央弹出一个层，显示登陆相关的信息，
如下图所示：
图13 百度知道页面3
提示：
（1）使用documentElement 属性的scrollLeft 及scrollTop 属性，可以获取滚动条向上和
向左滚动的距离；
（2）当网页加载时，触发window 对象的onload、onscroll 及onresize 事件；
（3）元素的显示和隐藏使用对象的display 属性进行控制；
8．做一个新闻评论页面，要求当用户输入内容然后点击提交按钮时，刚发表的评论自动显
示在评论列表，显示用户昵称、发布时间和评论内容，同时评论条数自动增加。

页面效果如
下：
图14 腾讯新闻评论页面
要求：用DOM 实现。

提示：
（1）用户点击“提交评论”按钮后，使用JavaScript 创建各Dom 节点，然后添加道评论列
表节点里面，最后，清空昵称和评论内容表单框内的内容；
（2）Dom 操作的相关方法有：创建一般节点（createElement）、创建文本节点
（createTextNode）、克隆节点（cloneNode）、添加子节点
（appendChild）等。

（3）显示当前时间，使用Date 对象进行计算。

（4）评论条数自动增加可以先通过innerHTML 属性获取当前条数，然后加一，再通过
innerHTML 更新当前评论条数。

9．做一个设置投票内容的页面，页面中包含“投票内容”、“投票类型”和“投票选项”
字段，页面效果图如下：
图15 设置投票内容
要求：
（1）页面刚打开时，投票选项只显示两项，当点击“增加选项”时，使用DOM 操作建立新
的选项，投票选项自动增加一行；
（2）增加的行包含“删除”链接，当点击“删除”链接时，该行自
动从DOM 数中移除；
（3）点击取消操作，网页关闭。

提示：
（1）建立HTML 页面时，投票选项只做两行，放在同一个父容器内；（2）点击“增加选项”时，使用DOM 增加节点的方式，向上述父容器内新增一个文本框及
一个“删除”链接，同时为该链接添加一个事件，并指定事件名，传入的参数为链接本身；
删除函数可以通过传入的链接来查找父容器，并通过DOM 将文本框及链接从DOM 树中移除。

10．模拟一个Windows 桌面，打开网页时，显示如下图所示的网页：
图16 模拟Windows 桌面1
点击“开始”按钮，弹出菜单，如下图所示：
图17 模拟Windows 桌面2
要求：
（1）网页打开或者调整窗口尺寸时，任务栏始终保持在页面的最下端；
（2）右下角的时间一直都在走动；
（3）点击“开始”按钮，按钮显示成按下去的状态，同时显示菜单，再次点击“开始”按
钮，按钮显示成正常的状态，同时隐藏菜单；
（4）鼠标移动到菜单任一项上时，该项背景编程蓝色；
（5）鼠标点击菜单任一项，菜单隐藏，开始菜单显示成正常状态。

提示：
（1）做布局时，状态栏的position 属性应当设置为absolute，以方便绝对定位；
（2）通过clientHeight 和scrollTop 配合使用,计算出开始菜单显
示的位置；
（3）当窗口加载和尺寸发生改变时，分别触发onload 和onresize 事件；
（4）显示当前时间用Date 对象计算出，同时，通过setInterval 函数可以控制每一秒的时
间都在更新；
（5）“开始”菜单按下去和正常状态，分别定义了两个CSS 类，进行切换；
（6）菜单的显示和隐藏，使用display 属性控制；
（7）菜单当前项编程蓝色，可以通过设置当前状态下的样式进行切换。

__。