# myDemo

**Repository Path**: itxnh/my-demo

## Basic Information

- **Project Name**: myDemo
- **Description**: 总结前端几个基础，常用的例子！
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2021-03-30
- **Last Updated**: 2022-06-10

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# 前端基础题目

## 一、隔行换色

**要求：需要过滤第一行，其他的行根据单双数设置对应的背景颜色。（颜色任意）**

![](https://cdn.jsdelivr.net/gh/wx35f9daa715c8bb0f/image/20210330191110.png)



## 二、全选和全不选、反选

**要求：**

1. **选中右上角的复选框，下方所有的复选框被选中**

2. **取消选中右上角的复选框，下方所有的复选框被取消选中**

3. **点击反选按钮，下方选中的框状态改为不选中，下方未选中的框状态改为选中**

![](https://cdn.jsdelivr.net/gh/wx35f9daa715c8bb0f/image/20210330191404.png)

## 三、省市联动

**要求：选择城市下拉框的值，对应的区域的下拉框的值也会发生改变**

![](https://cdn.jsdelivr.net/gh/wx35f9daa715c8bb0f/image/20210330191505.png)

## 四、左右移动

要求：

1. 点击”>“按钮，将左侧选中的第一个选项移动到右侧

2. 点击”>>“按钮，将左侧选中的所有选项移动到右侧

3. 点击”>>>“按钮，将左侧的所有选项移动到右侧

4. 下面三个按钮的效果，则是将右侧的选项移动到左侧，要求如上

![](https://cdn.jsdelivr.net/gh/wx35f9daa715c8bb0f/image/20210330191610.png)

## 五、五星好评

**要求：评分五角星图标，随鼠标移动显示。当鼠标放在五角星上时前面的显示为黑色，后面的显示白色五角星**

![](https://cdn.jsdelivr.net/gh/wx35f9daa715c8bb0f/image/20210330191714.png)

## 六、表单校验

 要求：

1. 验证姓名

   1)不能为空 2)长度为 6-12 位

2. 验证密码

   1)不能为空  2)长度为 6-12 位  3)不能包含用户名

3. 年龄: 必须选择 小鲜肉

4. 性别：必须选择一项

5. 爱好: 必须选择一项

6. 城市: 必须选择一项

  满足以上条件

1. 弹出所有的内容
2. 提交表单

  否则

1. 说明错误原因

2. 不能提交表单

   ![](https://cdn.jsdelivr.net/gh/wx35f9daa715c8bb0f/image/20210330191936.png)

   ##  七、用户信息管理

   1. 页面加载完成，发起请求user.json文件，查询数据，并显示所有数据，填充在表格中

   2. 点击添加按钮弹出表单，填充信息

   - 确定，信息填写无误，则动态添加至最后一条数据之后

   - 同时将数据发送给后台【模拟即可】

   - 取消

   3. 点击修改按钮，修改信息

   - 回显数据到表单

   - 表单可编辑，修改

   - 确定，信息填写无误，则动态修改已有数据

   - 同时将修改内容发送给后台【模拟即可】

   -  取消

   4. 点击删除按钮，删除当前数据，同时删除后台数据【模拟】

   5. 点击删除已选条目，删除已选记录，同时删除后台数据【模拟】

      ​	

      ![](https://cdn.jsdelivr.net/gh/wx35f9daa715c8bb0f/image/20210330192118.png)