面向对象1
2018-10-27 本文已影响0人
听风_ead5
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
/* .check{
overflow: hidden;
list-style: none;
padding: 0;
}
.check li{
float: left;
}
.enter{
width: 80%;
height: 30px;;
} */
</style>
</head>
<body>
<!-- <div class="wrap">
<h3>小目标列表</h3>
<h5>添加小目标列表</h5>
<input class="enter" type="text">
<p>共有N个目标</p>
<ul class="check">
<li><input type="radio">所有目标</li>
<li><input type="radio">已完成目标目标</li>
<li><input type="radio">未完成目标</li>
</div>
<input class="enter" type="text">
</div> -->
<h1>高新小目标列表</h1>
<h3>添加一个学习目标</h3>
<input type="text" id="change">
<p>共有 <b id="total"></b> 个目标</p>
<div>
<input type="radio" value="0" checked name="wyq">所有目标
<input type="radio" value="1" name="wyq">已完成目标
<input type="radio" value="2" name="wyq">未完成目标
</div>
<div id="list">
</div>
<script>
let change=document.getElementById("change");
let total=document.getElementById("total");
let radioArr=document.getElementsByName("wyq");
let list=document.getElementById("list");
//class 定义类 原型方法
//function ====>bind(this)===>event
//===>参数的默认值<===>短路现象||
//字符串===>``==>${}
//递归===>return 函数调用
//过滤元素 ==>filter
//es6 json===>定义函数的简写 fn()
//typeof===>函数 封装 ==>参数检测（代码的健壮性不够）
// change.onkeydown=
//定义Mt类
class Mt{
//Mt有4个属性title，total，status，list
constructor(title='',total=0,status=0,list=[]){
//title ==>input change
this.title=title;
//总目标
this.total=total;
//状态
this.status=status;
//数据
this.list=list;
}
//给id=change的input输入框定义一个事件change
change(){
console.log('按下事件');
console.log(this);
//当按下回车键时触发
if(event.keyCode==13){
//获取输入框的值赋给属性title
this.title=event.target.value;
console.log(event.target.value);
//回车之后清空输入框
event.target.value='';
//0 全部
//1 完成
//2 未完成
//给数组list拼接标签
//给p标签下的每个div一个标识index即下标，可以通过下标来寻找确定每个div，以便可以分别对div进行操作
//给p下的每个div一个status，初始值均为2，即都是“未完成”
//给p下的每个div绑定一个事件upStatus来更新每个div的status的值
//给第2个p标签的内容赋值为输入框的值
//给b标签绑定一个事件delList，并给一个唯一标识index即下标，来区分每一个b，以便确定点击的是哪个“X”
//给每一块一个status，初始值为2以便后来的筛选
this.list.push({
el:
`
<p status="${0}">
<div index=${this.list.length} onclick="mt.upStatus()" style="width:20px;height:20px;display:inline-block;background-color:black;" status='2'></div>
<p>${this.title}</p>
<b onclick='mt.delList()' index=${this.list.length}>X</b>
</p>
`,
status:2
});
console.log(this.list);
//添加完数据之后 render
// this.render();
//将拼接好的this.list当做参数传给render并调用
this.render(this.list);
}
}
render(l){
//页面的更新
//list
// console.log(this.list);
// list.innerHTML=this.list.join(',');
// for(let i=0,len=this.list.length;i<len;i++){
// }
// list.innerHTML=;
//递归==>条件 什么时候结束？=>i>length
//第一个参数i：用来控制循环层即下标,超过i时循环结束不再执行
//第二个参数：一个数组
//第3个参数：即用来显示到页面的字符串
function listStr(i,arr,str){
//当下标超出 超出下标的那个值得typeof为undefined，当下标超出将字符串返回
if(typeof arr[i]==="undefined"){
return str;
}else{
//字符串拼接
str+= arr[i].el;
//让下标向跳出循环的方向靠近
i++;
// console.log(i);
//将返回的值继续作为参数，继续调用函数litStr
return listStr(i,arr,str);
}
}
//list
// list.innerHTML=listStr(0,this.list,'');
//将字符串放入页面
list.innerHTML=listStr(0,l,'');
}
upStatus(){
// console.log(this);
// console.log(event.target)
// console.log('我被触发了！！！')
// console.log(event.target.status);
//获取当前点击的那个div的status的值
let s=event.target.getAttribute("status");
//获取当前点击的div的index的值
let index=event.target.getAttribute("index");
//判断s的值是2的话为1否则为2然后赋给status，（这里的status是json中和el同在的那个status）
this.list[index].status=s==2?1:2;
//判断s的值然后赋值给变量status
let status=s==2?1:2;
//让你点击的那个div变色
event.target.style.backgroundColor=s==1?'black':"gold";
//修改你点击的那个div的status的值为变量status的值
event.target.setAttribute('status',status);
// console.log(s);
}
delList(){
//用一个变量index来接收当前点击的那个b标签的index的值，来确定你点击的是哪个b
let index=event.target.getAttribute("index");
//将你点击的那个b标签所在的el的内容清空
this.list[Number(index)].el='';
// this.render();
//将点击“X”后的清空过el的那一块所在的数组作为参数传给render并调用render
this.render(this.list);
console.log(this.list);
console.log(index);
}
radioChange(){
//1.value
//定义变量val的值等于当前点击的单选框的value值用来确定当前点击的哪个单选框
//，为了筛选出标签中哪些标签的status的值和当前点击的单选框的value值相等（每个标签的status的值0,1,2和单选框的value值0,1,2对应）
let val=event.target.value;
console.log(val);
console.log(event.target.value);
//2.value==>list
//filter
console.log(this.list);
let arr=this.list.filter(
(value)=>{
//返回在arr中val为0的元素或者返回val和values.status相等的所有元素
return val==0||val==value.status
}
);
console.log(arr);
//3.list===>render
this.render(arr);
}
}
//第一个坑点
//实例化
let mt=new Mt();
//给change的onkeydown事件绑定
change.onkeydown=mt.change.bind(mt);
for(let i=0;i<radioArr.length;i++){
//确定点击哪个单选框来显示哪些东西被显示
radioArr[i].onchange=mt.radioChange.bind(mt);
}
</script>
</body>
</html>
