css样式
html{
background-color: #CCCCCC;
}
body{
margin: 0px;
padding: 0px;
}
.tops {
width: 100%;
height: 50px;
background-color: rgba(47, 47, 47, 0.98);
}
label{
float: left;
width: 100px;
line-height: 50px;
color: #ddd;
font-size: 24px;
cursor: pointer;
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
}
input[type="text"] {
width: 60%;
height: 24px;
margin-top: 12px;
text-indent: 10px;
border-radius: 5px;
box-shadow: 0 1px 0 rgba(255, 255, 255, 0.24),
0 1px 6px rgba(0, 0, 0, 0.45) inset;
border: none;
float: right;
}
.topInfo, .infoContent{
width: 50%;
margin: auto;
}
.undone,.done{
margin-top: 20px;
font-size: 25px;
font-weight: 900;
position: relative;
}
.info>span{
position: absolute;
top: 5px;
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{
list-style: none;
font-size: 14px;
font-weight: 400;
margin: 0;
padding: 0;
margin-top: 10px;
}
li{
height: 32px;
line-height: 32px;
background: #fff;
margin-bottom: 10px;
padding: 0 45px;
overflow: hidden;
border-radius: 3px;
border-left: 5px solid #629A9C;
box-shadow: 0 1px 2px rgba(0,0,0,0.07);
position: relative;
}
li.doneLi{
border-left: 5px solid #999;
opacity: 0.5;
}
.close{
display: inline-block;
position: absolute;
right: 20px;
top:4px;
border-radius: 10px;
}
input.changeInput{
width: 300px;
display: none;
position: absolute;
}
html
<div class="tops">
<div class="topInfo">
<label>ToDoList</label>
<input type="text" name="addInfo" class="addInfo" placeholder="添加ToDo"/>
</div>
</div>
<div class="infoContent">
<div class="undone">
<div class="info">
正在进行
<span>0</span>
</div>
</div>
<div class="done">
<div class="info">
已经完成
<span>0</span>
</div>
</div>
</div>
<input type="text" class="changeInput">
js
var arr,addInfo,undone,done,undoneSpan,doneSpan,undoneUl,doneUl,changeInput;
init();
function init(){
addInfo=document.querySelector(".addInfo");
changeInput=document.querySelector(".changeInput");
undone=document.querySelector(".undone");
done=document.querySelector(".done");
undoneSpan=document.querySelector(".undone span");
doneSpan=document.querySelector(".done span");
arr=localStorage.todoList ? JSON.parse(localStorage.todoList) : [];
dataSave();
document.addEventListener("keyup",keyHandler);
}
function keyHandler(e){
if(e.keyCode!==13) return;
if(addInfo.value.trim().length===0) return;
arr=JSON.parse(localStorage.todoList);
arr.push({finish:false,info:addInfo.value});
dataSave();
addInfo.value="";
}
function dataSave(){
localStorage.todoList=JSON.stringify(arr);
var undoneList=arr.filter(item=>{
return !item.finish;
})
var doneList=arr.filter(item=>{
return item.finish;
})
undoneSpan.textContent=undoneList.length;
doneSpan.textContent=doneList.length;
if(undoneUl){
undoneUl.remove();
undoneUl=null;
}
if(doneUl){
doneUl.remove();
doneUl=null;
}
undoneUl=createUl(undoneList,undone);
doneUl=createUl(doneList,done);
}
function createUl(list,parent){
var ul=document.createElement("ul");
for(var i=0;i<list.length;i++){
var li=document.createElement("li");
if(list[i].finish) li.className="doneLi";
var ck=document.createElement("input");
ck.type="checkbox";
ck.data=list[i];
ck.checked=list[i].finish;
ck.addEventListener("click",clickHandler);
li.appendChild(ck);
var span=document.createElement("span");
span.textContent=list[i].info;
span.style.userSelect="none";
li.appendChild(span);
span.data=list[i];
span.addEventListener("dblclick",changeLiTextHandler);
var bn=document.createElement("button");
bn.innerHTML="x";
bn.className="close";
bn.data=list[i];
bn.addEventListener("click",removeClickHandler);
li.appendChild(bn);
ul.appendChild(li);
}
parent.appendChild(ul);
return ul;
}
function removeClickHandler(e){
var index=arr.indexOf(this.data);
if(index>-1) arr.splice(index,1);
dataSave();
}
function clickHandler(e){
this.data.finish=this.checked;
dataSave();
}
function changeLiTextHandler(e){
changeInput.style.display="block";
var rect=this.getBoundingClientRect();
changeInput.style.left=rect.x+"px";
changeInput.style.top=rect.y-16+"px";
changeInput.data=this.data;
changeInput.focus();
changeInput.addEventListener("blur",blurHandler);
}
function blurHandler(e){
this.data.info=this.value;
this,data=null;
this.value="";
this.style.display="none";
dataSave();
}