css修饰部分
*{
margin: 0;
padding: 0;
}
body{
background-color: palegreen;
}
.big{
width: 800px;
margin: 0 auto;
text-align: center;
line-height: 40px;
}
.data_1,.data_2,.data_3{
display: none;
}
.btn>button{
border: 0px;
width: 100px;
height: 25px;
border-radius: 10px;
}
.btn>button:hover{
background-color: pink;
}
/* tab切换准备的class属性 */
.show{
display: block;
}
.active{
background-color: pink;
}
table{
width: 800px;
}
静态页面部分
<!-- 静态页面 -->
<div class="big">
<h1>盟友APP</h1>
<h4>这里有你想要遇到的人</h4>
<div class="btn">
<button type="button" class=" btn1 active">添加好友</button>
<button type="button" class=" btn1">好友列表</button>
<button type="button" class=" btn1">黑名单</button>
</div>
<div class="data">
<div class="data_1 datah show">
姓名:<input type="text" id="nameIpt"/><br>
年龄:<input type="text" id="ageIpt"/><br>
性别:<label>
男:<input type="radio" name="sex" value="0" checked />
女:<input type="radio" name="sex" value="1"/>
</label><br>
地区:<select class="sel">
<option value="--请选择--">--请选择--</option>
<option value="北京">北京</option>
<option value="河北">河北</option>
<option value="山西">山西</option>
<option value="上海">上海</option>
</select><br>
爱好:<label>
全选<input type="checkbox" onclick="quan()" id="quan"/>
抽烟<input type="checkbox" value="抽烟" id="hobby" onclick="checkAll()"/>
喝酒<input type="checkbox" value="喝酒" id="hobby" onclick="checkAll()"/>
打麻将<input type="checkbox" value="打麻将" id="hobby" onclick="checkAll()"/>
</label><br>
<button type="button" onclick="add()">添加</button>
</div>
<div class="data_2 datah">
<table border="1" cellspacing="0" cellpadding="0">
<thead>
<tr>
<th>序号</th>
<th>姓名</th>
<th>年龄</th>
<th>性别</th>
<th>地区</th>
<th>爱好</th>
<th>时间</th>
<th>操作</th>
</tr>
</thead>
<tbody class="tbody1">
<!-- <tr>
<td>序号</td>
<td>姓名</td>
<td>年龄</td>
<td>性别</td>
<td>地区</td>
<td>爱好</td>
<td>时间</td>
<td>操作</td>
</tr> -->
</tbody>
</table>
</div>
<div class="data_3 datah">
<table border="1" cellspacing="0" cellpadding="0">
<thead>
<tr>
<th>序号</th>
<th>姓名</th>
<th>年龄</th>
<th>性别</th>
<th>地区</th>
<th>爱好</th>
<th>时间</th>
<th>操作</th>
</tr>
</thead>
<tbody class="tbody2">
<!-- <tr>
<td>序号</td>
<td>姓名</td>
<td>年龄</td>
<td>性别</td>
<td>地区</td>
<td>爱好</td>
<td>时间</td>
<td>
<button type="button" onclick="del(${arr[i].id})">拉黑</button>
<button type="button" onclick="laHei(${arr[i].id})">拉黑</button>
</td>
</tr> -->
</tbody>
</table>
</div>
</div>
</div>
js交互页面
<script type="text/javascript">
// 获取DOM元素
var btnDOMs = document.querySelectorAll(".btn1")
var dataDOMs = document.querySelectorAll(".datah")
var nameDOM = document.querySelector("#nameIpt")
var ageDOM = document.querySelector("#ageIpt")
var sexDOMs = document.querySelectorAll("input[name='sex']")
var selDOMs = document.querySelector(".sel")
var hobbyDOM = document.querySelectorAll("input[id='hobby']")
var tbody1DOM = document.querySelector(".tbody1")
var tbody2DOM = document.querySelector(".tbody2")
console.log(hobbyDOM)
// tab切换
for(var i = 0; i < btnDOMs.length; i++ ){
btnDOMs[i].xiabiao = i;
btnDOMs[i].onclick = function (){
for(var a = 0; a< btnDOMs.length; a++){
btnDOMs[a].classList.remove("active");
dataDOMs[a].classList.remove("show");
}
this.classList.add("active");
dataDOMs[this.xiabiao].classList.add("show");
}
}
// 添加函数
var arr = [];
if(localStorage.a04200){
arr = JSON.parse(localStorage.a04200);
}
show()
function add(){
var obj = {
name:nameDOM.value,
age:ageDOM.value,
sex:sexDOMs[0].checked ? "男" : "女",
diQu:selDOMs.value,
hobby:hobby(),
time:buildTime(),
id:+new Date(),
isBlack:0 //0正常 1拉黑
}
arr.push(obj);
localStorage.a04200 = JSON.stringify(arr);
show();
btnDOMs[1].onclick();
}
// 渲染函数
function show(){
var str = "";
var str1 = "";
for(var i = 0; i < arr.length; i++){
if(arr[i].isBlack == 0){
str += `
<tr>
<td>${i+1}</td>
<td>${arr[i].name}</td>
<td>${arr[i].age}</td>
<td>${arr[i].sex}</td>
<td>${arr[i].diQu}</td>
<td>${arr[i].hobby}</td>
<td>${arr[i].time}</td>
<td>
<button type="button" onclick="del(${arr[i].id})">删除</button>
<button type="button" onclick="laHei(${arr[i].id})">拉黑</button>
</td>
</tr>
`;
}
if(arr[i].isBlack == 1){
str1 += `
<tr>
<td>${i+1}</td>
<td>${arr[i].name}</td>
<td>${arr[i].age}</td>
<td>${arr[i].sex}</td>
<td>${arr[i].diQu}</td>
<td>${arr[i].hobby}</td>
<td>${arr[i].time}</td>
<td>
<button type="button" onclick="del(${arr[i].id})">删除</button>
<button type="button" onclick="YClaHei(${arr[i].id})">移除拉黑</button>
</td>
</tr>
`;
}
}
tbody1DOM.innerHTML = str;
tbody2DOM.innerHTML = str1;
}
// 删除函数
function del(id){
var f = confirm("是否确认删除")
var index = arr.findIndex(function (v,k){
return v.id == id
})
if(f == false){
return;
}else{
arr.splice(index , 1);
}
localStorage.a04200 = JSON.stringify(arr);
show()
}
// 时间函数
function buildTime(){
var d = new Date();
return d.getFullYear()+"-"+
b0(d.getMonth())+"-"+
b0(d.getMonth())+" "+
b0(d.getHours())+":"+
b0(d.getMinutes())+":"+
b0(d.getSeconds())
}
// 补零函数
function b0(a){
return a<10 ? "0"+a : a
}
// 爱好函数
function hobby(){
var str = ""
for (var i = 0; i < hobbyDOM.length; i++) {
if(hobbyDOM[i].checked == true){
str += " " + hobbyDOM[i].value;
}
}
return str;
}
// 拉黑函数
function laHei(id){
var index = arr.findIndex(function (v,k){
return v.id == id
})
arr[index].isBlack = 1;
localStorage.a04200 = JSON.stringify(arr);
show()
btnDOMs[2].onclick();
}
// 移除拉黑
function YClaHei(id){
var index = arr.findIndex(function (v,k){
return v.id == id
})
arr[index].isBlack = 0;
localStorage.a04200 = JSON.stringify(arr);
show()
btnDOMs[1].onclick();
}
// 全选控制多选
function quan(){
var quanDOM = document.querySelector("#quan");
for(var i = 0; i<hobbyDOM.length; i++){
hobbyDOM[i].checked = quanDOM.checked;
}
}
// 多选控制全选
function checkAll(){
var quanDOM = document.querySelector("#quan");
var f = true;
for(var i =0; i<hobbyDOM.length; i++){
if(hobbyDOM[i].checked == false){
f = false;
break;
}
}
quanDOM.checked = f;
}
</script>