在B站看pink老师的jQuery课,发现todolist没用原生js写过,于是为了锻炼一下自己,用原生js改写下(只有增删改功能)。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
body{
padding: 0;
margin: 0;
font-size: 16px;
background: #CDCDCD;
}
header {
height: 50px;
/* background: #333; */
background: rgba(47, 47, 47, 0.98);
}
section {
margin: 0 auto;
}
label {
/* display: block; */
float: left;
width: 100px;
line-height: 50px;
color: #DDD;
font-size: 24px;
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
}
input[type="text"] {
float: right;
width: 60%;
height: 24px;
margin-top: 12px;
text-indent: 10px;
border-radius: 5px;
box-shadow: 0 1px 6px rgba(0, 0, 0, 0.45) inset;
/* 内阴影 */
border: none
}
h2 {
position: relative;
}
span {
position: absolute;
top: 2px;
right: 5px;
display: inline-block;
padding: 0 5px;
height: 20px;
border-radius: 20px;
background: #E6E6FA;
line-height: 22px;
text-align: center;
color: #666;
font-size: 14px;
}
ul {
padding: 0;
list-style: none;
}
li input {
position: absolute;
top: 2px;
left: 10px;
width: 22px;
height: 22px;
}
p {
margin: 0;
}
li p input {
top: 3px;
left: 40px;
width: 70%;
height: 20px;
line-height: 14px;
text-indent: 5px;
font-size: 14px;
}
li {
height: 32px;
line-height: 32px;
background: #fff;
position: relative;
margin-bottom: 10px;
padding: 0 45px;
border-radius: 3px;
border-left: 5px solid #629A9C;
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.07);
}
#todolist li {
cursor: move;
}
#donelist li {
border-left: 5px solid #999;
opacity: 0.5;
}
li a {
position: absolute;
top: 2px;
right: 5px;
display: inline-block;
width: 14px;
height: 12px;
border-radius: 14px;
border: 6px double #FFF;
background: #CCC;
line-height: 14px;
text-align: center;
color: #FFF;
font-weight: bold;
font-size: 14px;
cursor: pointer;
}
button {
color: #333;
text-decoration: none;
display: block;
margin: 0 auto;
width: 150px;
height: 30px;
border: 1px #ddd solid;
border-radius: 20px;
}
@media screen and (max-device-width: 620px) {
section {
width: 96%;
padding: 0 2%;
}
}
@media screen and (min-width: 620px) {
section {
width: 600px;
padding: 0 10px;
}
}
</style>
</head>
<body>
<header>
<section>
<label>todolist</label>
<input type="text" placeholder="请输入任务" autocomplete="off">
</section>
</header>
<section>
<h2>待完成
<span id="todocount"></span>
</h2>
<ul id="todolist"></ul>
<h2>已完成
<span id="donecount"></span>
</h2>
<ul id="donelist"></ul>
</section>
<section>
<button>清除全部任务</button>
</section>
<script>
/* var todoList=[{
title:"",
done:false
},{}]; 存储格式*/
var input=document.getElementsByTagName("input")[0];
var todolist=document.getElementById("todolist");
var donelist=document.getElementById("donelist");
var todocount=document.getElementById("todocount");
var donecount=document.getElementById("donecount");
var btn=document.getElementsByTagName("button")[0];
init();
//输入事件
input.addEventListener('keyup',function(e){
// console.log(e.keyCode);
// var li=document.createElement("li");
//init();
if(e.keyCode==13&&this.value!=""){//回车
var data=getdata();
data.push({title:this.value,done:false});
savedata(data);
init();
input.value="";
}
})
//没有事件,for只会进行一个循环,即从页面刷新起只能判定一个事件
todolist.addEventListener('click',function(e){
del(e);
change(e);
})
donelist.addEventListener('click',function(e){
del(e);
change(e);
})
//复选框从input的第二个算起,所以i=1
//console.log(1);
btn.addEventListener('click',function(){
localStorage.clear();
init();
})
function del(e){
var data=getdata();
if(e.target.tagName=='A'){
var index=e.target.getAttribute("id");
data.splice(index,1);
savedata(data);
init();
}
}
function change(e){
var data=getdata();
if(e.target.tagName=='INPUT'){
var index=e.target.parentNode.children[2].getAttribute("id");
data.filter((t)=>{
if (t===data[index]){
t.done=!t.done;
}
})
savedata(data);
init();
}
}
function init(){
var data=getdata();
input.value="";
input.focus();
todolist.innerHTML="";
donelist.innerHTML="";
todoCount=0;
doneCount=0;
data.forEach((item,index)=>{
//console.log(1);
if(item.done){
//console.log(11);
donelist.innerHTML+="<li><input type='checkbox' checked='checked' > <p>" + item.title + "</p> <a href='javascript:;' id=" + index + " ></a></li>";
doneCount++;
}
else{
//console.log(00);
todolist.innerHTML+="<li><input type='checkbox'> <p>" + item.title + "</p> <a href='javascript:;' id=" + index + " ></a></li>";
todoCount++;
}
todocount.innerHTML=todoCount;
donecount.innerHTML=doneCount;
})
}
function getdata(){
var data=localStorage.getItem("todoList");
return data?JSON.parse(data):[] ;
}
function savedata(data){
localStorage.setItem("todoList",JSON.stringify(data));
}
</script>
</body>
</html>