javaScript基础练习题
详细代码、图 见git仓库
- 网页前端开发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个相同标记格子连成一条线即为胜利 |
效果：
javaScript基础练习题相关推荐
- JavaScript基础练习题（一）
JavaScript基础练习题(一) 注:仅供参考,不可用于其他用途 一.单选题 1.HTML页面中写JavaScript时,会用到HTML的一个标签,它是 A .script B . st ...
- JavaScript基础练习题（四）
JavaScript基础练习题(四) 一.单选题 1.同步和异步执行分别表示什么含义 A 同步是按顺序依次执行:异步是同时分开一起执行 B 同步是同时分开一起执行:异步是按顺序依次执行 C 同步是按一 ...
- 获取页面所有属性并生成html6,JavaScript基础练习题（三）
一.单选题 1.以下关于Javascript中事件的描述中,不正确的是 A click--鼠标单击事件 B focus--获取焦点事件 C mouseover--鼠标指针移动到事件源对象上时触发的事件 ...
- 第五模块·WEB开发基础-第2章JavaScript基础
第1章 JavaScript基础 01-JavaScript历史介绍 02-JavaScript的组成 03-JavaScript的引入方式 04-变量的使用 05-基本数据类型(一) 06-基本数据 ...
- HTML5 基础练习题总结（一）
HTML5 基础练习题总结(一) 1. 下面的描述正确的是 #menu{ font-size:14px; } A #menu是标签选择器 B #menu是元素选择器 C #menu是类选择器 D #m ...
- JavaScript 基础知识
JavaScript 基础知识 文章目录 JavaScript 基础知识 @[toc] 一.JS的基本语法与结构 1.1 JavaScript 用法 1.2 JavaScript 输出 1.3 Jav ...
- JavaScript基础语法笔记，ECMAScript基础，每部分都有经典案例以及解析。会持续更新（2022.0310）
提示:文章写完后,目录可以自动生成,如何生成可参考右边的帮助文档 文章目录 前言 一.JavaScript导读 1.1 什么是JavaScript(这里借鉴Js红宝书的内容,看一看就可以了) 1.2 ...
- JavaScript基础笔记集合（转）
JavaScript基础笔记集合 JavaScript基础笔记集合 js简介 js是脚本语言.浏览器是逐行的读取代码,而传统编程会在执行前进行编译 js存放的位置 html脚本必须放在< ...
- javascript基础语法——表达式
前面的话 一般地,关于javascript基础语法,人们听得比较多的术语是操作符和语句.但是,其实还有一个术语经常使用,却很少被提到,这就是javascript表达式(expression).本文将详 ...
最新文章
- 主动触发被动模式从而挟持无线客户端 – Passive Karma Attack
- 8.22 13.1-13.3
- Nagios监控之8：利用mutt+msmtp实现邮件报警
- ASP.NET Core微服务(一)——【完整API搭建及访问过程】
- JS开源框架Stimulus：让web应用在移动端达到原生体验！
- hive mysql编码问题_Hive中文乱码 生产环境问题解决
- [Beego] [bootstrap-paginator]实现分页功能
- tensorrt安装_利用TensorRT对深度学习进行加速
- div边框加入文字标题
- 电机扭矩计算公式T=9550*P/n
- 计算机为什么找不到网络打印机,电脑找不到网络打印机怎么办
- vc707 MicroBlaze LCD 试验
- 如何使用IceSword冰刃
- LSTC模型的应用场景有哪些?
- iOS关于APP唤醒和在后台做的事
- 喜大普奔！Maya 2022来了？！
- js实现整体，局部刷新
- 谁可以参与初创股权分配？
- 浅谈互联网行业发展趋势及现状
- （SSM解析错误）$%7BpageContext.request.contextPath%7D/account/save