<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
li{
list-style: none;
}
body{
background-color:#cdcdcd;
}
#title{
height: 50px;
width: 100%;
background-color:#323232;
}
#title_con{
width: 600px;
height: 50px;
margin: auto;
position: relative;
}
#title_con>span{
font-size: 20px;
color: #dddddd;
line-height: 50px;
}
#title_con>input{
width: 365px;
height: 25px;
position: absolute;
right: 0;
top:50%;
margin-top:-12.5px ;
outline: none;
border-radius: 5px;
padding-left: 5px;
}
#ing,#over{
width: 600px;
height: 70px;
line-height: 70px;
margin: auto;
position: relative;
}
#ing h2,#over h2{
font-size: 22px;
float: left;
}
#ing p,#over p{
width: 20px;
height: 20px;
background-color: #e6e6fa;
border-radius: 50%;
position: absolute;
right: 5px;
top: 50%;
margin-top:-10px;
text-align: center;
line-height: 20px;
}
#list,#list_over{
width: 600px;
margin: auto;
}
#list li,#list_over li{
height: 32px;
margin-bottom: 10px;
background-color: white;
border-radius: 5px;
position: relative;
}
#list li input,#list_over li input{
width:22px;
height:22px;
font-size: 22px;
position: absolute;
left: 15px;
top: 5px;
display: block;
}
#list li span,#list_over li span{
position: absolute;
left: 45px;
top:5px;
}
#list li div,#list_over li div{
width: 24px;
height: 18px;
background-color:#cccccc;
position: absolute;
top: 7px;
right: 7px;
border-radius: 15px;
text-align: center;
line-height: 18px;
color: white;
cursor: pointer;
}
#list li::before{
content:'';
width:5px;
height:32px;
background-color: #629a9c;
display: block;
border-radius: 1px;
}
#list_over li::before{
content:'';
width:5px;
height:32px;
background-color: #b3b3b3;
display: block;
border-radius: 1px;
}
#foot{
width: 600px;
margin: auto;
text-align: center;
font-size: 16px;
color: #666666;
}
</style>
</head>
<body>
<div id="title">
<div id="title_con">
<span>ToDoList</span>
<input placeholder="添加ToDo" />
</div>
</div>
<div id="ing">
<h2>正在进行</h2>
<p><span id="span_ing">0</span></p>
</div>
<ul id="list">
<!-- <li >
<input type="checkbox" />
<span>阿斯顿</span>
<div>-</div>
</li> -->
</ul>
<div id="over">
<h2>已经完成</h2>
<p><span id="span_over">0</span></p>
</div>
<ul id="list_over">
<!-- <li>
<input type="checkbox" />
<span>阿斯顿</span>
<div>-</div>
</li> -->
</ul>
<p id="foot"><span></span></p>
</body>
<script src="jquery.min.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
window.onload=function(){
start();
press();
}
function start(){
var arr=getlocal();
var list=$('#list');
var listover=$('#list_over')
var str1=[];
var str2=[];
var m=0;
var n=0;
for(var i=0;i<arr.length;i++){
if(arr[i].done==true){
var li=$('<li></li>');
var input=$('<input class="change" type="checkbox" />');
var div=$('<div class="del">-</div>');
var span=$(`<span>${arr[i].name}</span>`);
li.append(input).append(span).append(div);
str1.push(li);
m++;
}
if(arr[i].done==false){
var li=$('<li style="opacity:0.5"></li>');
var input=$('<input class="change" type="checkbox" checked />');
var div=$('<div class="del">-</div>');
var span=$(`<span>${arr[i].name}</span>`);
li.append(input).append(span).append(div);
str2.push(li);
n++;
}
}
list.html(str1);
listover.html(str2);
$('#span_ing').html(`${m}`);
$('#span_over').html(`${n}`);
$('.del').on('click',function(){
this.parentElement.remove();
var name=this.previousElementSibling.innerHTML;
var arr1=getlocal();
for(var i=0;i<arr1.length;i++){
if(arr1[i].name==name){
arr1.splice(i,1);
break;
}
}
setlocal(arr1);
start();
})
$('.change').on('click',function(){
this.parentElement.remove();
var arr2=getlocal();
var name=this.nextElementSibling.innerHTML;
for(var i=0;i<arr2.length;i++){
for(x in arr2[i]){
if(arr2[i].name==name){
arr2[i].done=false;
break;
}
}
}
setlocal(arr2);
start();
})
}
function press(){
var input=$('#title_con>input');
input.on('keydown',function(e){
if(e.keyCode==13){
var text=input.val();
var flag=true;
var local=getlocal();
local.push({"name":text,"done":flag});
setlocal(local);
input.val('');
start();
}
})
}
function getlocal(){
var local=localStorage.getItem('todo');
if(local!=null){
return JSON.parse(local);
}
else{
return [];
}
}
function setlocal(data){
localStorage.setItem('todo',JSON.stringify(data));
}
</script>
这里要引用jquery.min.js插件，剩下的可以直接拷贝运行，里面有个小bug
要自己找找改改幺.