javaScript基础练习题
- 网页前端开发2（Javascript、JQuery）
-
- ★☆☆☆☆
- 背景图片自动循环切换
- ★☆☆☆☆
要求：
要求：
要求：
效果：
要求：
效果：
要求：
效果：
资源：
要求：
效果：
资源：
要求：
效果：
资源：
要求：
效果：
要求：
效果：
要求：
要求：
要求：
要求：
要求：
要求：
效果：
要求：
效果：
要求：
效果：
要求：
效果：
要求：
效果：
要求：
效果：
要求：
要求：
要求：
要求：
效果：
要求：
效果：
要求：
效果：
要求：
效果：
要求：
效果：
要求：
效果：
要求：
效果：
要求：
效果：
要求：
效果：
要求：
效果：
要求：
效果：
要求：
效果：
要求：
效果：
要求：
效果：
要求：
效果：
要求：
效果：
要求：
效果：
要求：
效果：
要求：
效果：
要求：
效果：
要求：
效果：
要求：
效果：
要求：
效果：
资源：
要求：
效果：
要求：
效果：
资源：
要求：
效果：
要求：
效果：
要求：
效果：
要求：
效果：
要求：
效果：
jquery版需求
要求：
效果：
要求：
效果：
要求：
效果：
要求：
效果：
要求：
效果：
要求：
效果：
要求：
效果：
要求：
效果：
要求：
效果：
要求：
效果：
|
-
-
- 表格隔行换色
-
要求：
| 除表格标题外，实现隔行变色效果 |
效果：
|
|
-
-
- 获取焦点
-
要求：
| 输入框获取焦点，背景色变为红色，失去焦点背景色变为绿色 |
效果：
|
|
-
-
- 事件练习（亮灯熄灯）
-
要求：
| 点击图片进行亮灯和熄灯的切换 |
效果：
|
|
资源：
|
|
-
-
- 石头剪刀布(difficult)
-
要求：
|
效果：
| 1.
2.
3．
|
资源：
|
|
-
-
- 让“僵尸”动起来
-
要求：
| 可以通过点击上下左右按钮，控制“僵尸”的移动方向 |
效果：
|
|
资源：
|
|
-
-
- 随机展示不同颜色的小球
-
要求：
| 生成100个随机颜色随机位置的小球 |
效果：
|
|
-
-
- 电子表
-
要求：
| 模拟电子表，以秒为单位显示当前时间，每隔1秒“走”一次 |
效果：
|
|
-
-
- 元素查找练习1
-
要求：
| 要求为密码框设置value值，000000 要求为确认密码框设置value值，111111
|
-
-
- 元素查找练习2
-
要求：
| 将获取到的跑步和游泳复选框，也设置被选中状态
|
-
-
- 元素查找练习3
-
要求：
| 要求，页面加载完成时，性别默认选中女
|
-
-
- 元素查找练习4
-
要求：
| 将value为“yellow”的复选框，将value值改为：green |
-
-
- 元素查找求和
-
要求：
| 弹框显示div区域内元素文本内容的和，也就是要计算1+2+3的和
|
-
-
- 调色板
-
要求：
| 选择不同的颜色切换对应背景色 |
效果：
|
|
-
- ★★☆☆☆
- 二级联动
- ★★☆☆☆
要求：
| 点击城市，第二下列列表显示该城市对应的区域 |
效果：
|
|
-
-
- 鼠标移入改变字体和背景色
-
要求：
| 鼠标移入改变对应列表的字体和背景色 |
效果：
|
|
-
-
- 照片点名器
-
要求：
图片对应的名称在id为name的span中刷新。
|
效果：
|
|
-
-
- 判断字符串是否对称
-
要求：
|
效果：
|
|
-
-
- 计算字符串1在字符串2中出现的次数
-
要求：
格式要求：【字符串1】 在 【字符串2】中一共出现：x次 |
效果：
|
|
-
-
- 表单补全
-
要求：
| 1.表单提交地址：www.baidu.com,使用post方式提交 2.form表单“用户名”之前追加一天隐藏元素 <input type="hidden" name="uid" value="570272838" /> 3.form>标签之前追加“提交”和“重置”按钮
|
-
-
- 自动添加行数据
-
要求：
|
|
-
-
- 表格删除选中行
-
要求：
| 删除选中行、全选、全不选、反选 |
-
-
- 多复选框选中展示-XW
-
要求：
| 实现选中复选框，按照顺序向文本框中传值；取消勾选，对应的值在文本框中消失。 |
效果：
|
|
-
-
- 模仿流氓广告-XW
-
要求：
| 网页右下角的广告图片，鼠标移入则广告图片随机出现在另外一个地方，模拟广告无法关闭的效果。 |
效果：
|
|
-
-
- 是否输入实时提示
-
要求：
| 实时检查是否输入 |
效果：
|
|
-
-
- 数组求和
-
要求：
| 数值数组元素求和 |
效果：
|
|
-
-
- 数组元素查找
-
要求：
| 查找元素在数组中第一次出现的索引位置 |
效果：
|
|
-
-
- 找出偶数返回新数组
-
要求：
| 找出数组中的偶数，返回新数组 |
效果：
|
|
-
-
- 实时显示还能输入多少字符
-
要求：
| 实时显示还能输入多少字符 |
效果：
|
|
-
-
- 输入字数限制
-
要求：
| 限制字符输入数量，多出的字符将被自动去除 |
效果：
|
|
-
-
- 自动过滤左右空格
-
要求：
| 自动过滤字符串左右空格 |
效果：
|
|
-
-
- 页面倒计时跳转
-
要求：
| 页面倒计时跳转 |
效果：
|
|
-
-
- 表格的上移下移
-
要求：
| 点击上移下移按钮可以将当前行记录上下移动 |
效果：
|
|
-
-
- 点击实现复制粘贴
-
要求：
| 点击复制可以复制textarea中的内容，任何textarea下点击粘贴按钮，可以将复制的内容粘贴到该textarea中 |
效果：
|
|
-
-
- 无序列表选择添加-DWC
-
要求：
| 当点击球队时，被点击的球队背景色变为红色，并移入到下面的选项中，并且背景色变为白色 |
效果：
|
|
-
-
- 投票案例-DWC
-
要求：
| 当点击相对应的投票按钮，相对应的进度条边长，并且左边的票数自加1 |
效果：
|
|
-
-
- 模仿计算器退格效果-XW
-
要求：
| 点击【退格】按钮，删除输入数字的最后一位 |
效果：
|
|
-
-
- 预测儿童身高-XW
-
要求：
| 儿子成年身高=[(父身高+母身高)/2]×1.08 |
效果：
|
|
-
-
- 加法计算器-DWC
-
要求：
| 在文本框中数据数字，点击“等于号”按钮，计算加法，并将结果写入右侧的文本框中 |
效果：
|
|
-
-
- 进度条-DWC
-
要求：
| 当点击“点我按钮”，进度条逐步加宽。 |
效果：
|
|
-
-
- 密码强度校验
-
要求：
| 数字1，字母2 ，其他字符为3 当密码长度小于6为不符合标准， 长度大=6强度小于10，强度弱 ， 长度大=6 强度>=10 <15，强度中， 长度大=6 强度>=15 强 |
效果：
|
|
-
- ★★★☆☆
- 备忘录
- ★★★☆☆
要求：
| 可以添加要做的事情和时间到备忘录中， 勾选备忘录中的复习框，表示事情完成，从备忘录移动到已完成列表中。 |
效果：
|
|
-
-
- 模拟贴吧帖子上移下移置顶
-
要求：
| 点击上移下移实现该条记录的上下移动。 点击置顶，该条帖子字体红色，放置到第一条。 |
效果：
|
|
-
-
- 全选反选+删除选中行
-
要求：
|
效果：
|
|
-
-
- 表单校验
-
要求：
|
效果：
| 无 |
资源：
| 若想让校验页面更加绚丽，可以使用如下模板：
|
-
-
- 模拟电商网站条件筛选效果
-
要求：
|
效果：
|
|
-
-
- 模拟淘宝五星好评
-
要求：
| 1.鼠标移入：选中1-2星 - 显示灰色笑脸，右边未选中的显示空白笑脸 选中3-5星 - 显示金黄色笑脸， 右边未选中的显示空白笑脸 2.鼠标移出：如果鼠标点击选中，鼠标移出时保持选中效果不变 如果鼠标未点击，鼠标移出时，所有笑脸恢复成空白笑脸。 |
效果：
|
|
资源：
|
|
-
-
- 条件列表收缩展开
-
要求：
| 点击“全部显示”显示所有的筛选条件，按钮变为“精简显示品牌”， 点击“精简显示品牌”，收起列表只显示2列，最后一个条件“其他品牌保留” |
效果：
|
|
-
-
- 表单值动态修改
-
要求：
| 要求提交表单后：浏览器地址栏显示：http://127.0.0.1:8020/hello/servlet?username=zhangsan&hobby=read |
效果：
|
|
-
-
- 商品总价自动计算
-
要求：
| 输入选购商品价格、数量，自动计算小计和总价 |
效果：
|
|
-
- ★★★★☆
- 创建动态表格
- ★★★★☆
要求：
| 可以创建指定行列数量的表格，可以删除指定的行或列 |
效果：
|
|
-
-
- 表格内容排序
-
要求：
| 点击可排序的字段，对表格内容进行升序或降序排列 |
效果：
|
|
jquery版需求
- 排序前
- 排序后
-
-
- 表格各行换色+鼠标移入高亮
-
要求：
|
效果：
|
|
-
-
- 两个下拉列表的左右选择
-
要求：
|
效果：
|
|
-
-
- 拉票PK效果
-
要求：
|
效果：
|
|
-
-
- 模糊查询+动态添加行+删除行
-
要求：
| 添加： 输入姓名和年龄，点击添加按钮，表格动态添加一行数据 查询： 输入姓名一部分，点击查询。能够搜索姓名列的数据，只要包含输入的内容，这行背景色改为绿色。 删除： 点击删除按钮，该行数据删除。 |
效果：
| 添加：
查询：
|
-
- ★★★★★
- 模拟分页效果
- ★★★★★
要求：
| 点击上一页、下一页实现翻页效果。 |
效果：
|
|
-
-
- 随机数填入表格
-
要求：
| 点击开始按钮，随机生成1000以内的随机数，不足4位前面补0，将生成的随机数放入表格中，表格放满之后，开始和停止按钮不可点击。 |
效果：
|
|
-
-
- 输入数字金额转大写金额
-
要求：
| 输入数字金额自动转换成大写的金额显示 |
效果：
|
|
-
-
- 年月日倒计时
-
要求：
| 实现年月日倒计时效果 |
效果：
|
|
-
- 游戏篇
- 涂格子
- 游戏篇
要求：
| 点击方框内格子，会以十字形覆盖小格，若已有颜色的小格被再次覆盖将恢复为初始状态。 方框内所以小格被覆盖颜色，游戏结束 |
效果：
|
|
-
-
- 连线
- 网页前端开发2（Javascript、JQuery）
-
要求：
| 横、斜3个相同标记格子连成一条线即为胜利 |
效果：
|
|
要求：
| 点击方框内格子，会以十字形覆盖小格，若已有颜色的小格被再次覆盖将恢复为初始状态。 方框内所以小格被覆盖颜色，游戏结束 |
效果：
|
|
-
- 连线
要求：
| 实现年月日倒计时效果 |
效果：
|
|
- 游戏篇
- 涂格子
要求：
| 输入数字金额自动转换成大写的金额显示 |
效果：
|
|
-
- 年月日倒计时
要求：
| 点击开始按钮，随机生成1000以内的随机数，不足4位前面补0，将生成的随机数放入表格中，表格放满之后，开始和停止按钮不可点击。 |
效果：
|
|
-
- 输入数字金额转大写金额
要求：
| 点击上一页、下一页实现翻页效果。 |
效果：
|
|
-
- 随机数填入表格
要求：
| 添加： 输入姓名和年龄，点击添加按钮，表格动态添加一行数据 查询： 输入姓名一部分，点击查询。能够搜索姓名列的数据，只要包含输入的内容，这行背景色改为绿色。 删除： 点击删除按钮，该行数据删除。 |
效果：
| 添加：
查询：
|
- ★★★★★
- 模拟分页效果
要求：
|
效果：
|
|
-
- 模糊查询+动态添加行+删除行
要求：
|
效果：
|
|
-
- 拉票PK效果
要求：
|
效果：
|
|
-
- 两个下拉列表的左右选择
-
- 表格各行换色+鼠标移入高亮
排序后
要求：
| 点击可排序的字段，对表格内容进行升序或降序排列 |
效果：
|
|
jquery版需求
排序前
要求：
| 可以创建指定行列数量的表格，可以删除指定的行或列 |
效果：
|
|
-
- 表格内容排序
要求：
| 输入选购商品价格、数量，自动计算小计和总价 |
效果：
|
|
- ★★★★☆
- 创建动态表格
要求：
| 要求提交表单后：浏览器地址栏显示：http://127.0.0.1:8020/hello/servlet?username=zhangsan&hobby=read |
效果：
|
|
-
- 商品总价自动计算
要求：
| 点击“全部显示”显示所有的筛选条件，按钮变为“精简显示品牌”， 点击“精简显示品牌”，收起列表只显示2列，最后一个条件“其他品牌保留” |
效果：
|
|
-
- 表单值动态修改
要求：
| 1.鼠标移入：选中1-2星 - 显示灰色笑脸，右边未选中的显示空白笑脸 选中3-5星 - 显示金黄色笑脸， 右边未选中的显示空白笑脸 2.鼠标移出：如果鼠标点击选中，鼠标移出时保持选中效果不变 如果鼠标未点击，鼠标移出时，所有笑脸恢复成空白笑脸。 |
效果：
|
|
资源：
|
|
-
- 条件列表收缩展开
要求：
|
效果：
|
|
-
- 模拟淘宝五星好评
要求：
|
效果：
| 无 |
资源：
| 若想让校验页面更加绚丽，可以使用如下模板：
|
-
- 模拟电商网站条件筛选效果
要求：
|
效果：
|
|
-
- 表单校验
要求：
| 点击上移下移实现该条记录的上下移动。 点击置顶，该条帖子字体红色，放置到第一条。 |
效果：
|
|
-
- 全选反选+删除选中行
要求：
| 可以添加要做的事情和时间到备忘录中， 勾选备忘录中的复习框，表示事情完成，从备忘录移动到已完成列表中。 |
效果：
|
|
-
- 模拟贴吧帖子上移下移置顶
要求：
| 数字1，字母2 ，其他字符为3 当密码长度小于6为不符合标准， 长度大=6强度小于10，强度弱 ， 长度大=6 强度>=10 <15，强度中， 长度大=6 强度>=15 强 |
效果：
|
|
- ★★★☆☆
- 备忘录
要求：
| 当点击“点我按钮”，进度条逐步加宽。 |
效果：
|
|
-
- 密码强度校验
要求：
| 在文本框中数据数字，点击“等于号”按钮，计算加法，并将结果写入右侧的文本框中 |
效果：
|
|
-
- 进度条-DWC
要求：
| 儿子成年身高=[(父身高+母身高)/2]×1.08 |
效果：
|
|
-
- 加法计算器-DWC
要求：
| 点击【退格】按钮，删除输入数字的最后一位 |
效果：
|
|
-
- 预测儿童身高-XW
要求：
| 当点击相对应的投票按钮，相对应的进度条边长，并且左边的票数自加1 |
效果：
|
|
-
- 模仿计算器退格效果-XW
要求：
| 当点击球队时，被点击的球队背景色变为红色，并移入到下面的选项中，并且背景色变为白色 |
效果：
|
|
-
- 投票案例-DWC
要求：
| 点击复制可以复制textarea中的内容，任何textarea下点击粘贴按钮，可以将复制的内容粘贴到该textarea中 |
效果：
|
|
-
- 无序列表选择添加-DWC
要求：
| 点击上移下移按钮可以将当前行记录上下移动 |
效果：
|
|
-
- 点击实现复制粘贴
要求：
| 页面倒计时跳转 |
效果：
|
|
-
- 表格的上移下移
要求：
| 自动过滤字符串左右空格 |
效果：
|
|
-
- 页面倒计时跳转
要求：
| 限制字符输入数量，多出的字符将被自动去除 |
效果：
|
|
-
- 自动过滤左右空格
要求：
| 实时显示还能输入多少字符 |
效果：
|
|
-
- 输入字数限制
要求：
| 找出数组中的偶数，返回新数组 |
效果：
|
|
-
- 实时显示还能输入多少字符
要求：
| 查找元素在数组中第一次出现的索引位置 |
效果：
|
|
-
- 找出偶数返回新数组
要求：
| 数值数组元素求和 |
效果：
|
|
-
- 数组元素查找
要求：
| 实时检查是否输入 |
效果：
|
|
-
- 数组求和
要求：
| 网页右下角的广告图片，鼠标移入则广告图片随机出现在另外一个地方，模拟广告无法关闭的效果。 |
效果：
|
|
-
- 是否输入实时提示
要求：
| 实现选中复选框，按照顺序向文本框中传值；取消勾选，对应的值在文本框中消失。 |
效果：
|
|
-
- 模仿流氓广告-XW
要求：
| 删除选中行、全选、全不选、反选 |
-
- 多复选框选中展示-XW
要求：
|
|
-
- 表格删除选中行
要求：
| 1.表单提交地址：www.baidu.com,使用post方式提交 2.form表单“用户名”之前追加一天隐藏元素 <input type="hidden" name="uid" value="570272838" /> 3.form>标签之前追加“提交”和“重置”按钮
|
-
- 自动添加行数据
要求：
格式要求：【字符串1】 在 【字符串2】中一共出现：x次 |
效果：
|
|
-
- 表单补全
要求：
|
效果：
|
|
-
- 计算字符串1在字符串2中出现的次数
要求：
图片对应的名称在id为name的span中刷新。
|
效果：
|
|
-
- 判断字符串是否对称
要求：
| 鼠标移入改变对应列表的字体和背景色 |
效果：
|
|
-
- 照片点名器
要求：
| 点击城市，第二下列列表显示该城市对应的区域 |
效果：
|
|
-
- 鼠标移入改变字体和背景色
要求：
| 选择不同的颜色切换对应背景色 |
效果：
|
|
- ★★☆☆☆
- 二级联动
要求：
| 弹框显示div区域内元素文本内容的和，也就是要计算1+2+3的和
|
-
- 调色板
要求：
| 将value为“yellow”的复选框，将value值改为：green |
-
- 元素查找求和
要求：
| 要求，页面加载完成时，性别默认选中女
|
-
- 元素查找练习4
要求：
| 将获取到的跑步和游泳复选框，也设置被选中状态
|
-
- 元素查找练习3
要求：
| 要求为密码框设置value值，000000 要求为确认密码框设置value值，111111
|
-
- 元素查找练习2
要求：
| 模拟电子表，以秒为单位显示当前时间，每隔1秒“走”一次 |
效果：
|
|
-
- 元素查找练习1
要求：
| 生成100个随机颜色随机位置的小球 |
效果：
|
|
-
- 电子表
要求：
| 可以通过点击上下左右按钮，控制“僵尸”的移动方向 |
效果：
|
|
资源：
|
|
-
- 随机展示不同颜色的小球
要求：
|
效果：
| 1.
2.
3．
|
资源：
|
|
-
- 让“僵尸”动起来
要求：
| 点击图片进行亮灯和熄灯的切换 |
效果：
|
|
资源：
|
|
-
- 石头剪刀布(difficult)
要求：
| 输入框获取焦点，背景色变为红色，失去焦点背景色变为绿色 |
效果：
|
|
-
- 事件练习（亮灯熄灯）
要求：
| 除表格标题外，实现隔行变色效果 |
效果：
|
|
-
- 获取焦点
要求：
| 实现5张图片每隔一秒轮流循环切换（到最后一张时在从第一张开始轮播） |
-
- 表格隔行换色
- ★☆☆☆☆
- 背景图片自动循环切换
要求：
| 横、斜3个相同标记格子连成一条线即为胜利 |
效果：
|
|