javaScript基础练习题

1. 网页前端开发2（Javascript、JQuery）

2. 1. ★☆☆☆☆
   2. 1. 背景图片自动循环切换

要求：

1. 1. 1. 表格隔行换色

要求：

效果：

1. 1. 1. 获取焦点

要求：

效果：

1. 1. 1. 事件练习（亮灯熄灯）

要求：

效果：

资源：

1. 1. 1. 石头剪刀布(difficult)

要求：

效果：

资源：

1. 1. 1. 让“僵尸”动起来

要求：

效果：

资源：

1. 1. 1. 随机展示不同颜色的小球

要求：

效果：

1. 1. 1. 电子表

要求：

效果：

1. 1. 1. 元素查找练习1

要求：

1. 1. 1. 元素查找练习2

要求：

1. 1. 1. 元素查找练习3

要求：

1. 1. 1. 元素查找练习4

要求：

1. 1. 1. 元素查找求和

要求：

1. 1. 1. 调色板

要求：

效果：

1. 1. ★★☆☆☆
   2. 1. 二级联动

要求：

效果：

1. 1. 1. 鼠标移入改变字体和背景色

要求：

效果：

1. 1. 1. 照片点名器

要求：

效果：

1. 1. 1. 判断字符串是否对称

要求：

效果：

1. 1. 1. 计算字符串1在字符串2中出现的次数

要求：

效果：

1. 1. 1. 表单补全

要求：

1. 1. 1. 自动添加行数据

要求：

1. 1. 1. 表格删除选中行

要求：

1. 1. 1. 多复选框选中展示-XW

要求：

效果：

1. 1. 1. 模仿流氓广告-XW

要求：

效果：

1. 1. 1. 是否输入实时提示

要求：

效果：

1. 1. 1. 数组求和

要求：

效果：

1. 1. 1. 数组元素查找

要求：

效果：

1. 1. 1. 找出偶数返回新数组

要求：

效果：

1. 1. 1. 实时显示还能输入多少字符

要求：

效果：

1. 1. 1. 输入字数限制

要求：

效果：

1. 1. 1. 自动过滤左右空格

要求：

效果：

1. 1. 1. 页面倒计时跳转

要求：

效果：

1. 1. 1. 表格的上移下移

要求：

效果：

1. 1. 1. 点击实现复制粘贴

要求：

效果：

1. 1. 1. 无序列表选择添加-DWC

要求：

效果：

1. 1. 1. 投票案例-DWC

要求：

效果：

1. 1. 1. 模仿计算器退格效果-XW

要求：

效果：

1. 1. 1. 预测儿童身高-XW

要求：

效果：

1. 1. 1. 加法计算器-DWC

要求：

效果：

1. 1. 1. 进度条-DWC

要求：

效果：

1. 1. 1. 密码强度校验

要求：

效果：

1. 1. ★★★☆☆
   2. 1. 备忘录

要求：

效果：

1. 1. 1. 模拟贴吧帖子上移下移置顶

要求：

效果：

1. 1. 1. 全选反选+删除选中行

要求：

效果：

1. 1. 1. 表单校验

要求：

效果：

资源：

1. 1. 1. 模拟电商网站条件筛选效果

要求：

效果：

1. 1. 1. 模拟淘宝五星好评

要求：

效果：

资源：

1. 1. 1. 条件列表收缩展开

要求：

效果：

1. 1. 1. 表单值动态修改

要求：

效果：

1. 1. 1. 商品总价自动计算

要求：

效果：

1. 1. ★★★★☆
   2. 1. 创建动态表格

要求：

效果：

1. 1. 1. 表格内容排序

要求：

效果：

jquery版需求

1. 排序前

2. 排序后

3. 1. 1. 表格各行换色+鼠标移入高亮

要求：

效果：

1. 1. 1. 两个下拉列表的左右选择

要求：

效果：

1. 1. 1. 拉票PK效果

要求：

效果：

1. 1. 1. 模糊查询+动态添加行+删除行

要求：

效果：

1. 1. ★★★★★
   2. 1. 模拟分页效果

要求：

效果：

1. 1. 1. 随机数填入表格

要求：

效果：

1. 1. 1. 输入数字金额转大写金额

要求：

效果：

1. 1. 1. 年月日倒计时

要求：

效果：

1. 1. 游戏篇
   2. 1. 涂格子

要求：

效果：

1. 1. 1. 连线

要求：

效果：

除表格标题外，实现隔行变色效果

输入框获取焦点，背景色变为红色，失去焦点背景色变为绿色

点击图片进行亮灯和熄灯的切换

1. 输入0-2之间的数字0-剪刀  1-石头  2-布，
2. 电脑随机一个出拳
3. 判断人的输赢
4. 将人机出拳结果展示在浏览器

1.

2.

3．

可以通过点击上下左右按钮，控制“僵尸”的移动方向

生成100个随机颜色随机位置的小球

模拟电子表，以秒为单位显示当前时间，每隔1秒“走”一次

要求为密码框设置value值，000000

要求为确认密码框设置value值，111111

将获取到的跑步和游泳复选框，也设置被选中状态

要求，页面加载完成时，性别默认选中女

将value为“yellow”的复选框，将value值改为：green  

弹框显示div区域内元素文本内容的和，也就是要计算1+2+3的和

选择不同的颜色切换对应背景色

点击城市，第二下列列表显示该城市对应的区域

鼠标移入改变对应列表的字体和背景色

1. 点击开始，图片开始在id为“onnum”的div 中随机刷新。

图片对应的名称在id为name的span中刷新。

1. 点击停止，图片停止刷新，并将图片显示在id为“showresult”的div中，

1. 在文本框输入字符串
2. 点击按钮开始判断
3. 将文本内容和判断结果显示在id为result的div中

1. 在文本框1中输入一个字符串a，在文本框2中输入一个字符串b
2. 计算字符串a在字符串b中出现的次数
3. 将结果写入到id为“result”的div中。

格式要求：【字符串1】 在 【字符串2】中一共出现：x次

1.表单提交地址：www.baidu.com,使用post方式提交

2.form表单“用户名”之前追加一天隐藏元素

<input type="hidden" name="uid" value="570272838" />

3.</form>标签之前追加“提交”和“重置”按钮

删除选中行、全选、全不选、反选

实现选中复选框，按照顺序向文本框中传值；取消勾选，对应的值在文本框中消失。

网页右下角的广告图片，鼠标移入则广告图片随机出现在另外一个地方，模拟广告无法关闭的效果。

实时检查是否输入

数值数组元素求和

查找元素在数组中第一次出现的索引位置

找出数组中的偶数，返回新数组

实时显示还能输入多少字符

限制字符输入数量，多出的字符将被自动去除

自动过滤字符串左右空格

页面倒计时跳转

点击上移下移按钮可以将当前行记录上下移动

点击复制可以复制textarea中的内容，任何textarea下点击粘贴按钮，可以将复制的内容粘贴到该textarea中

当点击球队时，被点击的球队背景色变为红色，并移入到下面的选项中，并且背景色变为白色

当点击相对应的投票按钮，相对应的进度条边长，并且左边的票数自加1

点击【退格】按钮，删除输入数字的最后一位

儿子成年身高=[(父身高+母身高)/2]×1.08

女儿成年身高=(父身高×0.923+母身高)/2

错误提示有提示：

没选择儿童性别！

输入父母身高不是数字！

输入父母身高要都是55-250之间！

在文本框中数据数字，点击“等于号”按钮，计算加法，并将结果写入右侧的文本框中

当点击“点我按钮”，进度条逐步加宽。

数字1，字母2 ，其他字符为3

当密码长度小于6为不符合标准，

长度大=6强度小于10，强度弱 ，

长度大=6 强度>=10 <15，强度中，

长度大=6 强度>=15 强

可以添加要做的事情和时间到备忘录中，

勾选备忘录中的复习框，表示事情完成，从备忘录移动到已完成列表中。

点击上移下移实现该条记录的上下移动。

点击置顶，该条帖子字体红色，放置到第一条。

1. 点击复选框或按钮实现列表复选框的选中或取消
2. 可以删除选中行

1. 校验用户不为空，必须是6位以上字母数字组合
2. 两次密码必须一致，密码不能是纯数字
3. 校验邮箱格式
4. 表单内容都是必填项

无

若想让校验页面更加绚丽，可以使用如下模板：

1. 点击 尺寸、颜色、价格中的选项，被选中的选项添加到筛选条件中，同时去除原选项被选中的条件
2. 点击已选中的筛选条件中的选项，表示去掉该筛选条件。同时该筛选条件原本属于哪个类别，在原类别中在添加上该筛选条件。

1.鼠标移入：选中1-2星 - 显示灰色笑脸，右边未选中的显示空白笑脸

        选中3-5星 - 显示金黄色笑脸， 右边未选中的显示空白笑脸

2.鼠标移出：如果鼠标点击选中，鼠标移出时保持选中效果不变

       如果鼠标未点击，鼠标移出时，所有笑脸恢复成空白笑脸。

点击“全部显示”显示所有的筛选条件，按钮变为“精简显示品牌”，

点击“精简显示品牌”，收起列表只显示2列，最后一个条件“其他品牌保留”

要求提交表单后：浏览器地址栏显示：http://127.0.0.1:8020/hello/servlet?username=zhangsan&hobby=read

输入选购商品价格、数量，自动计算小计和总价

可以创建指定行列数量的表格，可以删除指定的行或列

点击可排序的字段，对表格内容进行升序或降序排列

1. 表格各行换色
2. 鼠标移入行高亮展示

1. 点击移动（à）按钮,可以将选择项移动到另一个列表中
2. 点击全部移动（à>）按钮可以将一侧选项全部移动到另一侧列表中

1. 点击投票1：左侧横条百分比数字和长度都增加，右侧反之减少

添加：

输入姓名和年龄，点击添加按钮，表格动态添加一行数据

查询：

输入姓名一部分，点击查询。能够搜索姓名列的数据，只要包含输入的内容，这行背景色改为绿色。

删除：

点击删除按钮，该行数据删除。

添加：

查询：

点击上一页、下一页实现翻页效果。

点击开始按钮，随机生成1000以内的随机数，不足4位前面补0，将生成的随机数放入表格中，表格放满之后，开始和停止按钮不可点击。

输入数字金额自动转换成大写的金额显示

实现年月日倒计时效果

点击方框内格子，会以十字形覆盖小格，若已有颜色的小格被再次覆盖将恢复为初始状态。

方框内所以小格被覆盖颜色，游戏结束

横、斜3个相同标记格子连成一条线即为胜利

点击方框内格子，会以十字形覆盖小格，若已有颜色的小格被再次覆盖将恢复为初始状态。

方框内所以小格被覆盖颜色，游戏结束

实现年月日倒计时效果

输入数字金额自动转换成大写的金额显示

点击开始按钮，随机生成1000以内的随机数，不足4位前面补0，将生成的随机数放入表格中，表格放满之后，开始和停止按钮不可点击。

点击上一页、下一页实现翻页效果。

添加：

输入姓名和年龄，点击添加按钮，表格动态添加一行数据

查询：

输入姓名一部分，点击查询。能够搜索姓名列的数据，只要包含输入的内容，这行背景色改为绿色。

删除：

点击删除按钮，该行数据删除。

添加：

查询：

1. 点击投票1：左侧横条百分比数字和长度都增加，右侧反之减少

1. 点击移动（à）按钮,可以将选择项移动到另一个列表中
2. 点击全部移动（à>）按钮可以将一侧选项全部移动到另一侧列表中

1. 表格各行换色
2. 鼠标移入行高亮展示

点击可排序的字段，对表格内容进行升序或降序排列

可以创建指定行列数量的表格，可以删除指定的行或列

输入选购商品价格、数量，自动计算小计和总价

要求提交表单后：浏览器地址栏显示：http://127.0.0.1:8020/hello/servlet?username=zhangsan&hobby=read

点击“全部显示”显示所有的筛选条件，按钮变为“精简显示品牌”，

点击“精简显示品牌”，收起列表只显示2列，最后一个条件“其他品牌保留”

1.鼠标移入：选中1-2星 - 显示灰色笑脸，右边未选中的显示空白笑脸

        选中3-5星 - 显示金黄色笑脸， 右边未选中的显示空白笑脸

2.鼠标移出：如果鼠标点击选中，鼠标移出时保持选中效果不变

       如果鼠标未点击，鼠标移出时，所有笑脸恢复成空白笑脸。

1. 点击 尺寸、颜色、价格中的选项，被选中的选项添加到筛选条件中，同时去除原选项被选中的条件
2. 点击已选中的筛选条件中的选项，表示去掉该筛选条件。同时该筛选条件原本属于哪个类别，在原类别中在添加上该筛选条件。

1. 校验用户不为空，必须是6位以上字母数字组合
2. 两次密码必须一致，密码不能是纯数字
3. 校验邮箱格式
4. 表单内容都是必填项

无

若想让校验页面更加绚丽，可以使用如下模板：

1. 点击复选框或按钮实现列表复选框的选中或取消
2. 可以删除选中行

点击上移下移实现该条记录的上下移动。

点击置顶，该条帖子字体红色，放置到第一条。

可以添加要做的事情和时间到备忘录中，

勾选备忘录中的复习框，表示事情完成，从备忘录移动到已完成列表中。

数字1，字母2 ，其他字符为3

当密码长度小于6为不符合标准，

长度大=6强度小于10，强度弱 ，

长度大=6 强度>=10 <15，强度中，

长度大=6 强度>=15 强

当点击“点我按钮”，进度条逐步加宽。

在文本框中数据数字，点击“等于号”按钮，计算加法，并将结果写入右侧的文本框中

儿子成年身高=[(父身高+母身高)/2]×1.08

女儿成年身高=(父身高×0.923+母身高)/2

错误提示有提示：

没选择儿童性别！

输入父母身高不是数字！

输入父母身高要都是55-250之间！

点击【退格】按钮，删除输入数字的最后一位

当点击相对应的投票按钮，相对应的进度条边长，并且左边的票数自加1

当点击球队时，被点击的球队背景色变为红色，并移入到下面的选项中，并且背景色变为白色

点击复制可以复制textarea中的内容，任何textarea下点击粘贴按钮，可以将复制的内容粘贴到该textarea中

点击上移下移按钮可以将当前行记录上下移动

页面倒计时跳转

自动过滤字符串左右空格

限制字符输入数量，多出的字符将被自动去除

实时显示还能输入多少字符

找出数组中的偶数，返回新数组

查找元素在数组中第一次出现的索引位置

数值数组元素求和

实时检查是否输入

网页右下角的广告图片，鼠标移入则广告图片随机出现在另外一个地方，模拟广告无法关闭的效果。

实现选中复选框，按照顺序向文本框中传值；取消勾选，对应的值在文本框中消失。

删除选中行、全选、全不选、反选

1.表单提交地址：www.baidu.com,使用post方式提交

2.form表单“用户名”之前追加一天隐藏元素

<input type="hidden" name="uid" value="570272838" />

3.</form>标签之前追加“提交”和“重置”按钮

1. 在文本框1中输入一个字符串a，在文本框2中输入一个字符串b
2. 计算字符串a在字符串b中出现的次数
3. 将结果写入到id为“result”的div中。

格式要求：【字符串1】 在 【字符串2】中一共出现：x次

1. 在文本框输入字符串
2. 点击按钮开始判断
3. 将文本内容和判断结果显示在id为result的div中

1. 点击开始，图片开始在id为“onnum”的div 中随机刷新。

图片对应的名称在id为name的span中刷新。

1. 点击停止，图片停止刷新，并将图片显示在id为“showresult”的div中，

鼠标移入改变对应列表的字体和背景色

点击城市，第二下列列表显示该城市对应的区域

选择不同的颜色切换对应背景色

弹框显示div区域内元素文本内容的和，也就是要计算1+2+3的和

将value为“yellow”的复选框，将value值改为：green  

要求，页面加载完成时，性别默认选中女

将获取到的跑步和游泳复选框，也设置被选中状态

要求为密码框设置value值，000000

要求为确认密码框设置value值，111111

模拟电子表，以秒为单位显示当前时间，每隔1秒“走”一次

生成100个随机颜色随机位置的小球

可以通过点击上下左右按钮，控制“僵尸”的移动方向

1. 输入0-2之间的数字0-剪刀  1-石头  2-布，
2. 电脑随机一个出拳
3. 判断人的输赢
4. 将人机出拳结果展示在浏览器

1.

2.

3．

点击图片进行亮灯和熄灯的切换