4JavaScriptjavaDOM.docx
- 文档编号:12616838
- 上传时间:2023-06-06
- 格式:DOCX
- 页数:13
- 大小:576.37KB
4JavaScriptjavaDOM.docx
《4JavaScriptjavaDOM.docx》由会员分享,可在线阅读,更多相关《4JavaScriptjavaDOM.docx(13页珍藏版)》请在冰点文库上搜索。
4JavaScriptjavaDOM
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.做一个XX知道页面,具体要求如下:
打开网页,右下角显示“欢迎牌”,效果如下所示:
图11XX知道页面1
当窗口滚动条滚动或者尺寸发生改变时,“欢迎牌”始终保持显示在页面的右下角。
当点击“欢迎牌”右上角的“最小化”图标时,“欢迎牌”内容隐藏,同时“最小化”按钮
图标变成“最大化”按钮图标,如下图所示:
图12XX知道页面2
当点击页面右上角“注册”或者“登陆”时,在屏幕中央弹出一个层,显示登陆相关的信息,
如下图所示:
图13XX知道页面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)菜单当前项编程蓝色,可以通过设置当前状态下的样式进行切换。
__
- 配套讲稿:
如PPT文件的首页显示word图标,表示该PPT已包含配套word讲稿。双击word图标可打开word文档。
- 特殊限制:
部分文档作品中含有的国旗、国徽等图片,仅作为作品整体效果示例展示,禁止商用。设计者仅对作品中独创性部分享有著作权。
- 关 键 词:
- JavaScriptjavaDOM