![](https://img-blog.csdnimg.cn/20210609194728741.jpg?x-oss-process=image/resize,m_fixed,h_224,w_224)
JavaScript交互式练习
JavaScript交互式练习
明金同学
There is no place like 127.0.0.1
展开
-
JavaScript交互式网页设计作业目录(作业笔记)
持续更新中.............Java高级程序设计笔记 • 【目录】我的大学笔记>>>原创 2020-10-29 20:45:24 · 9076 阅读 · 26 评论 -
利用自定义动画 animate() 方法,实现某图书网站中“近 7 日畅销榜”中的图书无缝垂直向上滚动特效:当光标移入到图书上时,停止滚动,鼠标移开时,继续滚动
查看本章节查看作业目录需求说明:利用自定义动画 animate() 方法,实现某图书网站中“近 7 日畅销榜”中的图书无缝垂直向上滚动特效:当光标移入到图书上时,停止滚动,鼠标移开时,继续滚动实现思路:在新建 HTML 页面中,添加 <h3> 和无序列表,用无序列表显示 6 本畅销书籍的名称 添加 CSS 规则,重点设置无序列表的父版块 div(id="book") 的宽度和高度,使其只能显示前 3 个列表项,溢出的后 3 项使用 overflow: hidden 属性原创 2020-11-16 11:23:38 · 13273 阅读 · 0 评论 -
使用 jQuery 中的淡入淡出动画,实现图片的轮播效果,每隔 2 秒钟切换一张图片,共 6 张图片
查看本章节查看作业目录需求说明:使用 jQuery 中的淡入淡出动画,实现图片的轮播效果,每隔 2 秒钟切换一张图片,共 6 张图片,切换到第 6 张后从头开始切换,在图片的下方显示 6 个小圆点,一一对应 6 张图片,图片切换时,图片对应的小圆点的颜色同时发生变化实现思路:在 HTML 页面中,添加 6 个 <img /> 标签,用于显示 6 张图片 添加 1 个 <ul> 标签和 6 个 <li> 标签,用于显示图片下方的 6 个小圆点 使原创 2020-11-16 11:16:23 · 12515 阅读 · 0 评论 -
使用JavaScript数组实现省份和城市的级联菜单
查看本章节查看作业目录需求说明:使用数组实现省份和城市的级联菜单。具体要求如下在页面中添加城市时,根据选择的省份,动态地添加该省份的城市 页面加载完毕后,第一个列表框填充“两湖两广”(湖北、湖南、广东和广西)省份,第二个列表框填充第一个省份的所有城市 当选择省份时,如“湖北省”,第二个下拉列表框先清除选项,然后再填充“湖北省”的所有城市实现思路:在脚本中,声明一个省份数组和一个使用文字作为数组元素下标的全局数组变量,用来存储省份和城市 声明函数initProvince()原创 2020-11-06 23:43:38 · 16018 阅读 · 0 评论 -
在 jQuery 中使用滑入滑出动画效果,实现二级下拉导航菜单的显示与隐藏效果
查看本章节查看作业目录需求说明:在 jQuery 中使用滑入滑出动画效果,实现二级下拉导航菜单的显示与隐藏效果用户将光标移动到“最新动态页”或“帮助查询”菜单上时,其二级菜单滑入显示 当鼠标从“最新动态页”或“帮助查询”菜单上移出时,其二级菜单滑出隐藏实现思路:新建 HTML 页面,在页面上使用无序列表显示一级菜单 在“最新动态页”和“帮助查询”菜单中加入二级菜单,二级菜单默认状态为隐藏 当鼠标悬浮在一级菜单上时,菜单的背景色变为红色,字体颜色变为白色 为一级菜单的鼠标原创 2020-11-16 11:19:50 · 224358 阅读 · 1 评论 -
使用jQuery 中的显示与隐藏动画效果实现折叠下拉菜单的收缩和展开,在页面的列表中有若干项,列表的每项中有一个二级列表,二级列表默认为隐藏状态。点击列表的项,切换二级列表的显示或隐藏状态
查看本章节查看作业目录需求说明:使用jQuery 中的显示与隐藏动画效果实现折叠下拉菜单的收缩和展开,在页面的列表中有若干项,列表的每项中有一个二级列表,二级列表默认为隐藏状态。点击列表的项,切换二级列表的显示或隐藏状态实现思路:在页面中添加<ul> 标签,用来显示无序列表。在<ul> 标签下添加两个<li> 标签,用来显示列表内容 在<li> 标签下添加两个<div> 标签,第一个显示一级列表的内容,第二个显示二级列表的原创 2020-11-16 10:30:41 · 13719 阅读 · 0 评论 -
利用 jQuery 操作页面元素的方法,实现电商网站购物车页面商品数量的增加和减少操作,要求单项价格和总价随着数量的改变而改变
查看本章节查看作业目录需求说明:利用 jQuery 操作页面元素的方法,实现电商网站购物车页面商品数量的增加和减少操作,要求单项价格和总价随着数量的改变而改变 当用户单击“+”按钮时,文本框中的商品数量增加 1,单项价格和总价相应地增加 点击“-”按钮,文本框中的数量减 1(不能小于 1),单项价格和总价相应地减少实现思路:声明 calPrice() 函数,根据商品的单价和数量计算单项价格,当点击改变数量的按钮时,调用 calPrice() 函数,及时刷新单项价格 声明 calT原创 2020-11-12 14:02:00 · 2995 阅读 · 3 评论 -
jQuery 中使用 DOM 操作节点,对页面中的表格实现增、删、查、改操作
查看本章节查看作业目录需求说明:在 jQuery 中使用 DOM 操作节点,对页面中的表格实现增、删、查、改操作点击“增加”超链接时,将表格中的第一条数据添加到表格的末尾 在输入框中输入 ID 号,点击“查询”超链接,表格将过滤出指定 ID 号的数据 点击每行对应的“删除”超链接,将删除对应行的数据 点击每行对应的“修改”超链接,ID、姓名和薪水变为可编辑状态,“修改”超链接变为“保存”,点击“保存”超链接,修改后的数据将被保存并显示实现思路:在页面中添加”增加”超链接、文本原创 2020-11-12 14:01:37 · 223037 阅读 · 1 评论 -
使用 jQuery 操作页面元素的方法,实现浏览大图片的效果,在页面上插入一幅小图片,当鼠标悬停到小图片上时,在小图片的右侧出现与之相对应的大图片
查看本章节查看作业目录需求说明:使用 jQuery 操作页面元素的方法,实现浏览大图片的效果,在页面上插入一幅小图片,当鼠标悬停到小图片上时,在小图片的右侧出现与之相对应的大图片实现思路:在 HTML 页面中添加 <img /> 标签,显示小图片 添加 <img id="big_img" /> 标签,用于显示放大的图片 在页面加载完毕事件中,获取 id 为 small_img 的 <img/> 标签对象,给图片的鼠标悬停事件绑定方法,实在鼠标指原创 2020-11-12 14:01:16 · 223528 阅读 · 1 评论 -
使用 jQuery对象设置页面中 <ul> 元素的标记类型,并使用 DOM 对象设置 <li> 元素的浮动属性和右边距。使用jQuery 对象和 DOM 对象设置页面元素属性
查看本章节查看作业目录需求说明:使用 jQuery对象设置页面中 <ul> 元素的标记类型,并使用 DOM 对象设置 <li> 元素的浮动属性和右边距。使用jQuery 对象和 DOM 对象设置页面元素属性实现思路:在页面中添加 <ul> 标签,用来显示无序列表 在 <ul> 标签下加入 4 个 <li> 标签,每个 <li> 标签中加入一个超链接,超链接显示的文本标签分别为首页、新闻、消息和关于 在页面中引原创 2020-11-12 14:00:54 · 4607 阅读 · 12 评论 -
使用 jQuery 选择器获取页面元素后,利用 jQuery 对象的 css() 方法设置其样式。
查看本章节查看作业目录需求说明:使用 jQuery 选择器获取页面元素后,利用 jQuery 对象的 css() 方法设置其样式。要求如下:点击页面的“更改样式”按钮后,使用 jQuery 设置标题“Web 前端技术”的字体颜色为红色 第一层的无序列表 <ul> 即“使用 DIV+CSS 设计前端页面”“使用 JavaScript+jQuery 制作页面特效”,列表符号是正方形 第二层无序列表是说明具体章节内容的,其列表符号是三角形实现思路:在 HTML 页面中原创 2020-11-11 23:23:53 · 4942 阅读 · 1 评论 -
使用 jQuery 选择器获取页面元素,然后利用 jQuery 对象的 css() 方法设置其 display 样式属性,从而实现显示和隐藏效果。
查看本章节查看作业目录需求说明:使用 jQuery 选择器获取页面元素,然后利用 jQuery 对象的 css() 方法设置其 display 样式属性,从而实现显示和隐藏效果。 具体要求如下:在页面中显示电影排行榜 当单击“(收起)”链接时,排行榜中后三项的电影名称隐藏而且链接的文本更改为“(展开) ” 当单击“(展开)”的链接时,后三项的电影名称重新显示且链接的文本更改为“(收起)”实现思路:新建 HTML 页面,使用 <h3> 和 <ul> 等标签原创 2020-11-11 23:23:26 · 222289 阅读 · 0 评论 -
使用 jQuery 基本选择器获取页面元素,然后利用 jQuery 对象的 css() 方法动态设置 <span> 和 <a> 标签的样式
查看本章节查看作业目录需求说明:使用 jQuery 基本选择器获取页面元素,然后利用 jQuery 对象的 css() 方法动态设置 <span> 和 <a> 标签的样式实现思路: 在 HTML 页面中导入 jQuery 框架 在页面加载完毕事件中,获取 <span> 标签对象,调用 css() 方法,设置字体颜色为红色 在页面加载完毕事件中,获取 <a> 标签对象,调用 css() 方法,去掉 <a> 标签的下原创 2020-11-11 23:22:57 · 2597 阅读 · 18 评论 -
使用 jQuery 实现页面背景色的更换,通过下拉框选择对应的颜色,页面背景会随着选中的颜色进行更换
查看本章节查看作业目录需求说明:使用 jQuery 实现页面背景色的更换,通过下拉框选择对应的颜色,页面背景会随着选中的颜色进行更换实现思路:在页面中添加 <select> 标签,用来显示颜色,并设置标签的 id 属性 在 <select> 标签下加入多个 <option> 标签,<option> 标签的值设置为不同的颜色值,如 blue。在<option> 标签下加入文本节点,分别显示不同的颜色,如蓝色 在页面中引入原创 2020-11-11 23:22:28 · 4191 阅读 · 0 评论 -
JQuery的安装与下载教程
网页中添加 jQuery可以通过多种方法在网页中添加 jQuery。 您可以使用以下方法:从jquery.com下载 jQuery 库 从 CDN 中载入 jQuery, 如从 Google 中加载 jQuery下载 jQuery有两个版本的 jQuery 可供下载:Production version - 用于实际的网站中,已被精简和压缩。 Development version - 用于测试和开发(未压缩,是可读的代码)以上两个版本都可以从jquery.com中下载。...转载 2020-11-07 11:12:30 · 6292 阅读 · 0 评论 -
使用自定义对象动态在页面上绘制一张表格,动态地向表格中添加公司员工的基本信息,测试数据不少于3 条,员工信息包括姓名、年龄、性别和部门
查看本章节查看作业目录需求说明:在页面上绘制一张表格,动态地向表格中添加公司员工的基本信息,测试数据不少于3 条,员工信息包括姓名、年龄、性别和部门实现思路:在页面中绘制表格,表头显示员工的基本信息,分别为姓名、年龄、性别和部门 在JavaScript 脚本中创建一个员工类,员工类中包含员工的属性:姓名、年龄、性别和部门 构建3 个不同的员工对象,并将它们添加到数组中 页面加载后,使用for…in 语句和with 语句遍历数组中员工对象,动态地将它们添加到表格中实现代码:原创 2020-11-06 23:44:28 · 222687 阅读 · 0 评论 -
使用JavaScript 中的Math对象和勾股定理公式,计算鼠标的位置与页面图片中心点的距离,根据距离对页面上的图片进行放大或缩小处理。距离远时图片放大,距离近时图片缩小
查看本章节查看作业目录需求说明:使用JavaScript 中的Math对象和勾股定理公式,计算鼠标的位置与页面图片中心点的距离,根据距离对页面上的图片进行放大或缩小处理。距离远时图片放大,距离近时图片缩小随着鼠标的移动,实时计算鼠标与图片中心点的距离,在输入框中显示图片的缩放系数 放大倍数不超过3 倍,缩小不小于50%实现思路:在页面上编写输入框用于显示缩放系数,并使用<img>标签显示一幅图片 获取图片中心点的坐标 获取鼠标移动时的坐标 使用勾股定理计算出鼠标原创 2020-11-06 10:09:18 · 4567 阅读 · 1 评论 -
在页面中添加两个 <select> 标签,用来显示年份和月份;同时添加两个 <ul> 标签,一个用来显示星期,另一个用来显示日期 在 JavaScript 脚本中动态添加年份和月份,获取当前日期的年份
查看本章节查看作业目录需求说明:使用 JavaScript 中的 Date 对象,在页面上显示一个万年历。选择不同的年份和月份,在页面中显示当前月的日历实现思路:在页面中添加两个 <select> 标签,用来显示年份和月份;同时添加两个 <ul> 标签,一个用来显示星期,另一个用来显示日期在 JavaScript 脚本中动态添加年份和月份,获取当前日期的年份和月份,显示到 <select> 标签上根据 <select> 标签上显原创 2020-11-06 10:07:56 · 4338 阅读 · 0 评论 -
在页面上绘制一张表格,使用 DOM 节点的动态添加和删除向表格中插入数据,点击表格每行后的“删除”超链接
查看本章节查看作业目录需求说明:在页面上绘制一张表格,使用 DOM 节点的动态添加和删除向表格中插入数据,点击表格每行后的“删除”超链接,使用 DOM 节点的删除操作将对应的行数据删除在文本输入框中输入姓名、年龄、班级和手机号,并选择性别 点击“插入数据”按钮,将输入框中的数据插入到表格中,表格中的数据将增加一条 点击表格中每条数据后的“删除”超链接,将删除该条数据,表格中的数据将减少一条实现思路:在页面中绘制表格,并添加 4 条虚拟数据,在每条数据后使用超链接,并且添加超链接原创 2020-11-01 19:46:54 · 3045 阅读 · 1 评论 -
制作四个选项卡页 Tab,用户可以通过切换不同的 Tab 页查看不同类别的新闻信息,每个 Tab 有对应的内容版块,点击某个选项卡时,显示对应的内容版块,隐藏其他内容版块,并且为了突出当前的选项卡,还
查看本章节查看作业目录需求说明:制作四个选项卡页 Tab,用户可以通过切换不同的 Tab 页查看不同类别的新闻信息,每个 Tab 有对应的内容版块,点击某个选项卡时,显示对应的内容版块,隐藏其他内容版块,并且为了突出当前的选项卡,还可以设置其背景样式实现思路:编写 HTML 页面,在页面中添加 Tab、内容版块,以及对应的 CSS 样式 为每个 Tab 元素添加点击事件,并将 Tab 元素的位置作为参数值传入 在 JavaScript 脚本中创建点击事件的处理函数 通过 doc原创 2020-11-01 19:46:39 · 2272 阅读 · 1 评论 -
使用 JavaScript 中的 document 对象查找 HTML 元素,实现“登录”按钮的高亮特效 鼠标悬浮于“登录”按钮时,按钮高亮显示;
查看本章节查看作业目录需求说明:使用 JavaScript 中的 document 对象查找 HTML 元素,实现“登录”按钮的高亮特效 鼠标悬浮于“登录”按钮时,按钮高亮显示;鼠标离开时,按钮恢复原状。 “登录”按钮初始效果如图所示 鼠标悬浮时,按钮高亮显示。“登录”按钮高亮显示效果如图所示实现思路:在 window 的 onload 事件中获取一组指定 name="btnLogin" 的“登录”按钮 用循环依次给每个 name=“btnLogin”的按钮设置 onmo原创 2020-11-01 19:46:24 · 5099 阅读 · 4 评论 -
使用 JavaScript 中的 document 对象的属性,根据下拉框中选择的属性,更改页面中的字体颜色和背景颜色
查看本章节查看作业目录需求说明:使用 JavaScript 中的 document 对象的属性,根据下拉框中选择的属性,更改页面中的字体颜色和背景颜色实现思路:在页面的 <body> 节点下加入 <h2> 节点,在 <h2> 节点下加入文本节点,显示为:更改字体颜色和背景颜色 在页面的 <body> 节点下加入 <select> 节点,设置 <select> 节点的 id 属性 在 <select>原创 2020-11-01 19:46:03 · 4955 阅读 · 16 评论 -
根据用户浏览页面的设备和屏幕的分辨率,在页面上显示不同的页面和不同大小的图片
查看本章节查看作业目录需求说明:根据用户浏览页面的设备和屏幕的分辨率,在页面上显示不同的页面和不同大小的图片 使用 screen 对象根据屏幕的分辨率显示不同大小的图片 使用 navigator 对象判断用户的浏览页面设备是移动端还是 PC 端。如果是 PC 端,跳转到 PC 端对应的页面;如果是移动端,则跳转到移动端对应的页面实现思路:使用 navigator 对象中的 userAgent 属性判断用户的浏览设备是 PC 端还是移动端 使用 location 对象中的 href原创 2020-11-01 00:00:05 · 4737 阅读 · 0 评论 -
使用 history 对象和 location 对象中的属性和方法制作一个简易的网页浏览工具
查看本章节查看作业目录需求说明:使用 history 对象和 location 对象中的属性和方法制作一个简易的网页浏览工具实现思路:使用history对象中的 forward() 方法和 back() 方法实现前进和后退的功能 使用location对象中的 reload() 方法实现刷新功能 使用location对象中的 assign() 方法实现页面的加载功能 使用浏览器预览效果实现代码:<!DOCTYPE html><html> <原创 2020-10-31 23:59:38 · 13127 阅读 · 0 评论 -
使用 JavaScript 中的 window 对象执行计时操作,完成一个抽奖程序
查看本章节查看作业目录需求说明:使用 JavaScript 中的 window 对象执行计时操作,完成一个抽奖程序实现思路:在 HTML 页面中放置背景图片、转盘和指针 3 张图片,并设置指针的点击事件 使用 window 对象的 setInterval() 方法反复执行间歇性旋转操作,当获取旋转的度数后,调用 window 对象的 clearInterval() 方法取消间歇性旋转操作 调用 window 对象的 setTimeout() 方法,在 4 秒后提示用户中奖结果实原创 2020-10-31 23:59:07 · 11657 阅读 · 0 评论 -
制作登录页面,点击键盘的 Enter 键或者单击“登录”按钮,验证用户输入的邮箱和密码是否正确
查看本章节查看作业目录需求说明:制作登录页面点击键盘的 Enter 键或者单击“登录”按钮,验证用户输入的邮箱和密码是否正确实现思路:准备登录的静态页面 在页面中嵌入脚本,自定义函数 checkLogin 验证登录,判断用户输入的邮箱和密码是否 自定义函数 keyFun,实现快捷键的操作。如果用户点击 Enter 键,则验证登录 事件和处理程序的绑定。按钮的 onclick 事件绑定 checkLogin() 函数,页面的 onkeypress 事件绑定keyFun() 函原创 2020-10-30 10:12:28 · 3457 阅读 · 0 评论 -
使用 JavaScript 的 HTML 页面混合、根据在下拉列表框中选择的内容,决定页面效果,用户在下拉列表框中选择页面将要使用的背景颜色
查看本章节查看作业目录需求说明:根据在下拉列表框中选择的内容,决定页面效果用户在下拉列表框中选择页面将 要使用的背景颜色当用户选择橙色时,页面背景将显示为橙色实现思路:用表单 <select> 元素列出可以选择的背景颜色 在 JavaScript 脚本中设置 <select> 元素对象的 onchange 事件属性,让 onchange 事件属性值等于处理该事件的匿名函数 在匿名函数内部获取 <select> 元素的选项值,并设置为页面原创 2020-10-30 10:11:55 · 224052 阅读 · 3 评论 -
在文本框中输入两个操作数和选择运算符后,在页面上显示输出结果
查看本章节查看作业目录需求说明:在文本框中输入两个操作数和选择运算符后,在页面上显示输出结果实现思路:单击“计算”按钮后,删除两个文本框左右两边的空格,删除空格后,判断输入框中是否都输入了内容,只要其中一个文本框没有输入,则提示“请输入两个操作数” 在输入了数据的前提下,验证输入的是否都是数值,只要其中一个输入错误,则提示“请输入正确的数值” 单击“计算”按钮,在判断输入的数据格式都是正确的前提下,根据用户选择的运算符号(可以选择 +、-、*、/)计算结果,并把结果显示在最后一个原创 2020-10-30 10:11:27 · 5399 阅读 · 0 评论 -
使用 JavaScript自定义函数计算出教室的体积大小,其中教室的长、宽、高分别为 8 米、5 米、3 米
查看本章节查看作业目录需求说明:使用 JavaScript自定义函数计算出教室的体积大小,其中教室的长、宽、高分别为 8 米、5 米、3 米实现思路:创建 HTML 页面 在页面的 <body> 标签中定义计算体积的函数,并将计算的体积作为返回值返回出来 调用计算体积的函数,并将 8、5 和 3 作为 3 个参数传递到函数中实现代码:<body> <script type="text/javascript"> // 使用自定义函数原创 2020-10-30 10:10:47 · 13225 阅读 · 0 评论 -
使用 JavaScript 用循环嵌套输出乘法表。外循环控制行数,内循环控制当前行要输出的乘法表达式,在页面上输出九九乘法表
查看本章节查看作业目录需求说明:在页面上输出九九乘法表,实现效果如图所示实现思路:创建HTML页面 在页面中嵌入 <script type="text/javascript"></script> 脚本标签 用循环嵌套输出乘法表。外循环控制行数,内循环控制当前行要输出的乘法表达式实现代码:<!DOCTYPE html><html> <head> <meta charset="utf-8"> &l原创 2020-10-29 20:50:46 · 223486 阅读 · 2 评论 -
使用 JavaScript 根据消费金额和消费者是否为会员确定折扣,最终核算实际应该支付的金额
查看本章节查看作业目录需求说明:根据消费金额和消费者是否为会员确定折扣,最终核算实际应该支付的金额消费金额在 200 元以上的会员折扣是 7.5 折,消费金额没有达到 200 元的会员折扣是 9 折 非会员只有消费金额在 100 元以上才有 9 折优惠实现思路:创建站点,新建HTML页面,在页面中嵌入 <script></script> 脚本标签 定义变量分别用于保存身份和消费的金额 用 if 语句判断身份和消费的金额,计算出各个情况下的实际消费金额原创 2020-10-29 20:50:21 · 3398 阅读 · 1 评论 -
使用 JavaScript 中的变量、数据类型和运算符,计算出两个 number 类型的变量与一个 string 类型的变量的和,根据 string 类型处于运算符的不同位置得到不同的结果
查看本章节查看作业目录需求说明:使用 JavaScript 中的变量、数据类型和运算符,计算出两个 number 类型的变量与一个 string 类型的变量的和,根据 string 类型处于运算符的不同位置得到不同的结果实现思路:创建站点,新建HTML页面在 HTML 页面的 <body> 标签中编写 JavaScript 脚本,在脚本中定义两个 number 类型的变量和一个 string 类型的变量根据不同的顺序计算 3 个变量的和实现代码:<原创 2020-10-29 20:49:56 · 11537 阅读 · 2 评论