js学习必刷题-----javaScript基础练习题_JavaScript

 

详细代码、图 见git仓库

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

 

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

要求：

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

 

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

要求：

实现5张图片每隔一秒轮流循环切换（到最后一张时在从第一张开始轮播）

 

      1. 表格隔行换色

要求：

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

 

效果：

 

 

      1. 获取焦点

要求：

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

 

效果：

 

 

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

要求：

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

 

效果：

 

 

 

资源：

  

      1. 石头剪刀布(difficult)

要求：

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

 

效果：

1.

 

2.

 

3．

 

 

 

资源：

   

      1. 让“僵尸”动起来

要求：

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

 

效果：

 

 

 

资源：

 

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

 

要求：

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

 

效果：

 

 

 

      1. 电子表

要求：

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

 

效果：

 

 

      1. 元素查找练习1

要求：

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

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

 

 

 

      1. 元素查找练习2

要求：

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

 

 

 

      1. 元素查找练习3

要求：

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

 

 

 

      1. 元素查找练习4

要求：

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

 

 

      1. 元素查找求和

要求：

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

 

 

      1. 调色板

要求：

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

 

效果：

 

 

 

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

要求：

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

 

效果：

 

 

 

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

要求：

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

 

效果：

 

 

      1. 照片点名器

要求：

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

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

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

 

效果：

 

 

      1. 判断字符串是否对称

要求：

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

 

效果：

 

 

 

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

要求：

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

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

 

效果：

 

 

      1. 表单补全

要求：

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

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

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

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

 

 

      1. 自动添加行数据

要求：

 

 

      1. 表格删除选中行

要求：

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

 

 

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

要求：

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

 

效果：

 

 

 

 

      1. 模仿流氓广告-XW

要求：

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

 

效果：

 

 

 

 

 

 

 

      1. 是否输入实时提示

要求：

实时检查是否输入

 

效果：

 

 

      1. 数组求和

要求：

数值数组元素求和

 

效果：

 

 

      1. 数组元素查找

要求：

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

 

效果：

 

 

 

 

      1. 找出偶数返回新数组

要求：

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

 

效果：

 

 

 

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

要求：

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

 

效果：

 

 

 

      1. 输入字数限制

要求：

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

 

效果：

 

 

 

      1. 自动过滤左右空格

要求：

自动过滤字符串左右空格

 

效果：

 

 

 

      1. 页面倒计时跳转

要求：

页面倒计时跳转

 

效果：

 

 

 

      1. 表格的上移下移

要求：

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

 

效果：

 

 

 

      1. 点击实现复制粘贴

要求：

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

 

效果：

 

 

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

要求：

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

 

效果：

 

 

 

      1. 投票案例-DWC

要求：

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

 

效果：

 

 

 

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

要求：

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

 

效果：

 

 

      1. 预测儿童身高-XW

要求：

儿子成年身高=[(父身高+母身高)/2]×1.08 
女儿成年身高=(父身高×0.923+母身高)/2 
错误提示有提示： 
没选择儿童性别！ 
输入父母身高不是数字！ 
输入父母身高要都是55-250之间！ 

 

效果：

 

 

      1. 加法计算器-DWC

要求：

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

 

效果：

 

 

 

 

      1. 进度条-DWC

要求：

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

 

效果：

 

 

 

 

      1. 密码强度校验

要求：

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

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

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

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

长度大=6 强度>=15 强

 

效果：

 

 

 

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

要求：

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

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

 

效果：

 

 

 

 

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

要求：

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

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

 

效果：

 

 

 

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

要求：

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

 

效果：

 

 

 

      1. 表单校验

要求：

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

 

效果：

无

 

资源：

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

 

 

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

要求：

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

 

效果：

 

 

 

      1. 模拟淘宝五星好评

要求：

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

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

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

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

 

效果：

 

 

 

资源：

   

      1. 条件列表收缩展开

要求：

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

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

 

效果：

 

 

      1. 表单值动态修改

要求：

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

 

效果：

 

 

      1. 商品总价自动计算

要求：

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

 

效果：

 

 

 

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

要求：

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

 

效果：

 

 

      1. 表格内容排序

要求：

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

效果：

 

 

jquery版需求

  1. 排序前

 

  1. 排序后

 

 

 

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

要求：

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

 

效果：

 

 

 

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

要求：

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

 

效果：

 

 

      1. 拉票PK效果

要求：

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

 

效果：

 

 

 

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

要求：

添加：

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

查询：

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

删除：

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

 

效果：

添加：

 

查询：

 

 

 

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

要求：

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

 

效果：

 

 

 

      1. 随机数填入表格

要求：

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

 

效果：

 

 

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

要求：

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

 

效果：

 

 

 

 

      1. 年月日倒计时

要求：

实现年月日倒计时效果

 

效果：

 

 

    1. 游戏篇
      1. 涂格子

要求：

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

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

 

效果：

 

 

      1. 连线

要求：

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

 

效果：

 

 

 

 

      1. 表格隔行换色

要求：

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

 

效果：

 

 

      1. 获取焦点

要求：

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

 

效果：

 

 

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

要求：

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

 

效果：

 

 

 

资源：

  

      1. 石头剪刀布(difficult)

要求：

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

 

效果：

1.

 

2.

 

3．

 

 

 

资源：

   

      1. 让“僵尸”动起来

要求：

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

 

效果：

 

 

 

资源：

 

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

 

要求：

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

 

效果：

 

 

 

      1. 电子表

要求：

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

 

效果：

 

 

      1. 元素查找练习1

要求：

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

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

 

 

 

      1. 元素查找练习2

要求：

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

 

 

 

      1. 元素查找练习3

要求：

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

 

 

 

      1. 元素查找练习4

要求：

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

 

 

      1. 元素查找求和

要求：

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

 

 

      1. 调色板

要求：

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

 

效果：

 

 

 

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

要求：

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

 

效果：

 

 

 

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

要求：

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

 

效果：

 

 

      1. 照片点名器

要求：

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

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

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

 

效果：

 

 

      1. 判断字符串是否对称

要求：

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

 

效果：

 

 

 

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

要求：

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

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

 

效果：

 

 

      1. 表单补全

要求：

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

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

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

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

 

 

      1. 自动添加行数据

要求：

 

 

      1. 表格删除选中行

要求：

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

 

 

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

要求：

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

 

效果：

 

 

 

 

      1. 模仿流氓广告-XW

要求：

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

 

效果：

 

 

 

 

 

 

 

      1. 是否输入实时提示

要求：

实时检查是否输入

 

效果：

 

 

      1. 数组求和

要求：

数值数组元素求和

 

效果：

 

 

      1. 数组元素查找

要求：

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

 

效果：

 

 

 

 

      1. 找出偶数返回新数组

要求：

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

 

效果：

 

 

 

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

要求：

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

 

效果：

 

 

 

      1. 输入字数限制

要求：

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

 

效果：

 

 

 

      1. 自动过滤左右空格

要求：

自动过滤字符串左右空格

 

效果：

 

 

 

      1. 页面倒计时跳转

要求：

页面倒计时跳转

 

效果：

 

 

 

      1. 表格的上移下移

要求：

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

 

效果：

 

 

 

      1. 点击实现复制粘贴

要求：

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

 

效果：

 

 

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

要求：

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

 

效果：

 

 

 

      1. 投票案例-DWC

要求：

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

 

效果：

 

 

 

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

要求：

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

 

效果：

 

 

      1. 预测儿童身高-XW

要求：

儿子成年身高=[(父身高+母身高)/2]×1.08 
女儿成年身高=(父身高×0.923+母身高)/2 
错误提示有提示： 
没选择儿童性别！ 
输入父母身高不是数字！ 
输入父母身高要都是55-250之间！ 

 

效果：

 

 

      1. 加法计算器-DWC

要求：

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

 

效果：

 

 

 

 

      1. 进度条-DWC

要求：

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

 

效果：

 

 

 

 

      1. 密码强度校验

要求：

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

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

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

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

长度大=6 强度>=15 强

 

效果：

 

 

 

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

要求：

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

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

 

效果：

 

 

 

 

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

要求：

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

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

 

效果：

 

 

 

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

要求：

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

 

效果：

 

 

 

      1. 表单校验

要求：

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

 

效果：

无

 

资源：

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

 

 

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

要求：

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

 

效果：

 

 

 

      1. 模拟淘宝五星好评

要求：

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

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

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

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

 

效果：

 

 

 

资源：

   

      1. 条件列表收缩展开

要求：

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

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

 

效果：

 

 

      1. 表单值动态修改

要求：

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

 

效果：

 

 

      1. 商品总价自动计算

要求：

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

 

效果：

 

 

 

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

要求：

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

 

效果：

 

 

      1. 表格内容排序

要求：

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

效果：

 

 

jquery版需求

  1. 排序前

 

  1. 排序后

 

 

 

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

要求：

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

 

效果：

 

 

 

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

要求：

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

 

效果：

 

 

      1. 拉票PK效果

要求：

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

 

效果：

 

 

 

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

要求：

添加：

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

查询：

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

删除：

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

 

效果：

添加：

 

查询：

 

 

 

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

要求：

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

 

效果：

 

 

 

      1. 随机数填入表格

要求：

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

 

效果：

 

 

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

要求：

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

 

效果：

 

 

 

 

      1. 年月日倒计时

要求：

实现年月日倒计时效果

 

效果：

 

 

    1. 游戏篇
      1. 涂格子

要求：

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

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

 

效果：

 

 

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

 

要求：

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

 

效果：

 

 

 

要求：

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

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

 

效果：

 

 

    1. 连线

要求：

实现年月日倒计时效果

 

效果：

 

 

  1. 游戏篇
    1. 涂格子

要求：

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

 

效果：

 

 

 

 

    1. 年月日倒计时

要求：

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

 

效果：

 

 

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

要求：

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

 

效果：

 

 

 

    1. 随机数填入表格

要求：

添加：

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

查询：

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

删除：

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

 

效果：

添加：

 

查询：

 

 

 

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

要求：

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

 

效果：

 

 

 

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

要求：

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

 

效果：

 

 

    1. 拉票PK效果

要求：

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

 

效果：

 

 

 

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

 

 

 

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

 

排序后

要求：

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

效果：

 

 

jquery版需求

排序前

要求：

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

 

效果：

 

 

    1. 表格内容排序

要求：

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

 

效果：

 

 

 

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

要求：

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

 

效果：

 

 

    1. 商品总价自动计算

要求：

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

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

 

效果：

 

 

    1. 表单值动态修改

要求：

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

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

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

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

 

效果：

 

 

 

资源：

   

    1. 条件列表收缩展开

要求：

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

 

效果：

 

 

 

    1. 模拟淘宝五星好评

要求：

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

 

效果：

无

 

资源：

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

 

 

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

要求：

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

 

效果：

 

 

 

    1. 表单校验

要求：

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

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

 

效果：

 

 

 

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

要求：

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

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

 

效果：

 

 

 

 

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

要求：

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

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

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

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

长度大=6 强度>=15 强

 

效果：

 

 

 

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

要求：

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

 

效果：

 

 

 

 

    1. 密码强度校验

要求：

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

 

效果：

 

 

 

 

    1. 进度条-DWC

要求：

儿子成年身高=[(父身高+母身高)/2]×1.08 
女儿成年身高=(父身高×0.923+母身高)/2 
错误提示有提示： 
没选择儿童性别！ 
输入父母身高不是数字！ 
输入父母身高要都是55-250之间！ 

 

效果：

 

 

    1. 加法计算器-DWC

要求：

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

 

效果：

 

 

    1. 预测儿童身高-XW

要求：

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

 

效果：

 

 

 

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

要求：

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

 

效果：

 

 

 

    1. 投票案例-DWC

要求：

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

 

效果：

 

 

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

要求：

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

 

效果：

 

 

 

    1. 点击实现复制粘贴

要求：

页面倒计时跳转

 

效果：

 

 

 

    1. 表格的上移下移

要求：

自动过滤字符串左右空格

 

效果：

 

 

 

    1. 页面倒计时跳转

要求：

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

 

效果：

 

 

 

    1. 自动过滤左右空格

要求：

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

 

效果：

 

 

 

    1. 输入字数限制

要求：

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

 

效果：

 

 

 

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

要求：

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

 

效果：

 

 

 

 

    1. 找出偶数返回新数组

要求：

数值数组元素求和

 

效果：

 

 

    1. 数组元素查找

要求：

实时检查是否输入

 

效果：

 

 

    1. 数组求和

要求：

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

 

效果：

 

 

 

 

 

 

 

    1. 是否输入实时提示

要求：

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

 

效果：

 

 

 

 

    1. 模仿流氓广告-XW

要求：

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

 

 

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

要求：

 

 

    1. 表格删除选中行

要求：

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

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

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

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

 

 

    1. 自动添加行数据

要求：

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

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

 

效果：

 

 

    1. 表单补全

要求：

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

 

效果：

 

 

 

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

要求：

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

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

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

 

效果：

 

 

    1. 判断字符串是否对称

要求：

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

 

效果：

 

 

    1. 照片点名器

要求：

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

 

效果：

 

 

 

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

要求：

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

 

效果：

 

 

 

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

要求：

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

 

 

    1. 调色板

要求：

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

 

 

    1. 元素查找求和

要求：

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

 

 

 

    1. 元素查找练习4

要求：

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

 

 

 

    1. 元素查找练习3

要求：

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

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

 

 

 

    1. 元素查找练习2

要求：

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

 

效果：

 

 

    1. 元素查找练习1

 

要求：

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

 

效果：

 

 

 

    1. 电子表

要求：

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

 

效果：

 

 

 

资源：

 

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

要求：

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

 

效果：

1.

 

2.

 

3．

 

 

 

资源：

   

    1. 让“僵尸”动起来

要求：

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

 

效果：

 

 

 

资源：

  

    1. 石头剪刀布(difficult)

要求：

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

 

效果：

 

 

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

要求：

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

 

效果：

 

 

    1. 获取焦点

要求：

实现5张图片每隔一秒轮流循环切换（到最后一张时在从第一张开始轮播）

 

    1. 表格隔行换色

 

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

要求：

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

 

效果：