<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
body {
background-color: deepskyblue;
}
.add,
.search {
width: 300px;
height: 350px;
background-color: burlywood;
position: absolute;
left: 40%;
top: 25%;
/* display: none; */
opacity: 0;
transition: all .3;
border-radius: 5px;
}
.add>div,
.search>div {
height: 50px;
margin-left: 30px;
}
.box {
position: relative;
margin: 0 auto;
}
button {
position: absolute;
left: 35%;
width: 80px;
height: 80px;
border-radius: 30px;
background-color: cornflowerblue;
cursor: pointer;
border: 1px solid cornflowerblue;
}
.btn2 {
left: 65%;
}
.search,
.search {
margin-top: 30px;
}
input {
border-radius: 10px;
}
.add input:hover,
.search input:hover {
width: 200px;
height: 30px;
}
.search {
position: absolute;
top: 21%;
}
select:hover {
width: 50px;
height: 40px;
}
.xinz {
margin-left: 100px;
}
.add span,
.search span {
position: absolute;
left: 90%;
top: 0;
font-size: 30px;
cursor: pointer;
width: 30px;
height: 30px;
text-align: center;
line-height: 30px;
vertical-align: auto;
}
h1 {
border-radius: 10px;
border: 2px solid cornflowerblue;
background-color: cornflowerblue;
height: 50px;
line-height: 50px;
margin: 0 auto;
width: 300px;
}
table,
tr,
th,
td {
text-align: center;
margin: 0 auto;
border: 1px solid black;
border-collapse: collapse;
}
th {
width: 180px;
background-color: cornflowerblue;
}
tr {
height: 50px;
}
.btn3,
.btn4 {
width: 80px;
height: 50px;
margin-top: -10px;
margin-left: 5px;
background-color: chocolate;
}
.length {
width: 300px;
height: 20px;
background-color: blue;
text-align: center;
color: white;
margin-left: 120px;
}
tr:hover {
background-color: bisque;
}
a {
text-align: center;
line-height: 50px;
display: inline-block;
width: 50px;
height: 50px;
text-decoration: none;
}
a:hover {
/* background-color: yellow; */
color: red;
}
</style>
<body>
<form action="">
<h1 style="text-align: center;">学生就业表</h1>
<div style="height: 120px;" class="box">
<div><button class="btn1">新增</button></div>
<div><button class="btn2">查询</button></div>
</div>
<div class="length">一共有1条数据</div>
<div>
<table>
<thead>
<tr>
<th>序号</th>
<th>姓名</th>
<th>年龄</th>
<th>性别</th>
<th>工资</th>
<th>城市</th>
<th>操作</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
</tr>
</tbody>
</table>
</div>
<div class="kuang">
<div class="add" style="display: none;">
<div class="xinz" style=" margin-left: 115px;font-weight: 700;font-size: larger;">新增成员</div>
<div>姓名:<input class="uname" type="text"></div>
<div>年龄:<input type="text" class="age"></div>
<div>性别: <select class="gender" name="gender" id="gender">
<option value="男">男</option>
<option value="女">女</option>
</select></div>
<div>工资:<input type="text" class="salary"></div>
<div>城市: <select class="city" name="city" id="city">
<option value="北京市">北京市</option>
<option value="福建省">福建省</option>
<option value="广东省">广东省</option>
<option value="湖南省">湖南省</option>
</select></div>
<span>×</span>
<button class="btn3">新增</button>
</div>
<div class="search" style="display: none;">
<div class="xinz" style=" margin-left: 115px;font-weight: 700;font-size: larger;">查询成员</div>
<div>姓名：<input type="text" name="se_name" id="se_name"></div>
<button class="btn4">查询</button>
<span>×</span>
</div>
</div>
</form>
<script>
let o;
//定义一个数组存本地数据
let arr = JSON.parse(localStorage.getItem('job')) || []
// let boo = JSON.parse(localStorage.getItem('recher')) || []
// console.log(boo);
console.log(arr);
//新增成员，点击显示新增框
const box = document.querySelector('.btn1')
let timeid1;
box.addEventListener('click', function (e) {
e.preventDefault()
document.querySelector('.search').style.display = 'none'
document.querySelector('.search').style.opacity = 0
clearInterval(timeid2)
if (document.querySelector('.add').style.opacity == 0) {
let num = 0
timeid1 = setInterval(function () {
num++
document.querySelector('.add').style.opacity = num / 10
// console.log(num);
if (num > 10) {
clearInterval(timeid1)
}
document.querySelector('.add').style.display = 'block'
}, 100)
uname.placeholder = ''
salary.placeholder = ''
age.placeholder = ''
}
})
//输入框检测
document.querySelector('.uname').addEventListener('input', function () {
console.log(this.value);
console.log(age.value)
console.log(gender.value)
console.log(salary.value)
console.log(city.value)
})
//查询模块，
const btn2 = document.querySelector('.btn2')
let timeid2;
btn2.addEventListener('click', e => {
e.preventDefault()
document.querySelector('.add').style.displ
