html
<!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">
<link rel="stylesheet" href="css/index.css">
<script src="js/jquery.min.js"></script>
<script src="js/index.js"></script>
<title>Document</title>
</head>
<body>
<div class="head">
<div class="headtop w">
<div class="title">ToDoList</div>
<input type="text" id="text" placeholder="添加ToDo">
</div>
</div>
<div class="content">
<div class="w">
<h2>正在进行<span id="todocount"></span></h2>
<ol id="todolist" class="demo-box">
</ol>
<h2>已经完成<span id="donecount"></span></h2>
<ul id="donelist">
</ul>
</div>
</div>
<footer class="w footer">Copyright @ 2014 todolist.cn</footer>
</body>
</html>
scss
.w {
width: 600px;
margin: 0 auto;
}
* {
margin: 0;
padding: 0;
list-style: none;
}
body {
background-color: rgb(211, 210, 210);
}
input {
outline: none;
}
a {
text-decoration: none;
}
.head {
background-color: black;
.headtop {
height: 60px;
display: flex;
justify-content: space-between;
align-items: center;
.title {
color: #fff;
font-size: 20px;
}
#text {
width: 350px;
height: 30px;
border-radius: 3px;
box-shadow: 1px 1px 1px #888;
}
}
}
.content {
.w {
h2 {
margin-top: 10px;
display: flex;
justify-content: space-between;
align-items: center;
span {
width: 20px;
height: 20px;
font-size: 16px;
text-align: center;
line-height: 20px;
background-color: #fff;
border-radius: 50%;
}
}
#todolist {
width: 600px;
display: flex;
flex-wrap: wrap;
justify-content: flex-end;
// background-color: skyblue;
li {
margin: 5px 0;
display: flex;
background-color: #fff;
align-items: center;
width: 600px;
height: 40px;
position: relative;
div {
width: 8px;
height: 40px;
background-color: skyblue;
}
input {
margin-left: 5px;
width: 20px;
height: 20px;
}
p {
padding-left: 5px;
}
a {
position: absolute;
right: 0;
width: 18px;
height: 18px;
border-radius: 50%;
border: 5px solid skyblue;
background-color: #999;
margin-right: 5px;
}
}
}
#donelist {
width: 600px;
display: flex;
justify-content: flex-end;
flex-wrap: wrap;
li {
display: flex;
flex-wrap: wrap;
background-color: rgba(255, 255, 255, 0.381);
align-items: center;
width: 590px;
height: 40px;
position: relative;
margin: 5px auto;
div {
width: 8px;
height: 40px;
background-color: skyblue;
}
input {
margin-left: 5px;
width: 20px;
height: 20px;
}
p {
padding-left: 5px;
}
a {
position: absolute;
right: 0;
width: 18px;
height: 18px;
border-radius: 50%;
border: 5px solid #fff;
background-color: #999;
margin-right: 5px;
}
}
}
}
}
.footer {
margin-top: 20px;
display: flex;
justify-content: center;
color: #999;
}
js
//回车13
$(function() {
load();
$('.head').on('keydown', function(e) {
if (e.keyCode === 13) {
if ($('#text').val() === '') {
alert('请输入要记的内容');
} else {
//先读取本地存储原来的数据
var local = getDate();
//把local数组进行更新数据 把最新的数据 追加给local数组
local.push({ title: $('#text').val(), done: false });
//把这个数据存储给本地存储
saveDate(local);
load();
$('#text').val('');
}
}
});
//todolist删除操作
$('ol,ul').on('click', 'a', function() {
//先获取本地存储
var data = getDate();
//修改数据
var index = $(this).attr('id');
data.splice(index, 1); //数组删除方式 第一个参数是从哪儿删 第二个参数是删几个
//保存到本地
saveDate(data);
//重新渲染页面
load();
});
//正在进行
$('ol,ul').on('click', 'input', function() {
//先获取本地存储数据
var data = getDate();
var index = $(this).siblings('a').attr('id');
//修改数据
data[index].done = $(this).prop('checked');
//保存到本地
saveDate(data);
//渲染页面
load();
});
//读取本地数据的函数
function getDate() {
var data = localStorage.getItem('todolist');
if (data !== null) {
//本地存储里面的数据是字符串格式 我们需要对象格式
return JSON.parse(data);
} else {
return [];
}
}
//保存本地存储数据
function saveDate(data) {
localStorage.setItem('todolist', JSON.stringify(data));
}
//渲染加载数据
function load() {
var data = getDate();
var todocount = 0; //正在进行的个数
var donecount = 0; //已经完成的个数
console.log(data);
//遍历之前先要清空里面的元素内容
$("ol,ul").empty();
//遍历数据
$.each(data, function(i, n) {
if (n.done) {
donecount++;
$('ul').prepend("<li><div></div></div><input type='checkbox' checked='checked'><p>" + n.title + "</p><a href='javascript:;' id=" + i + "></a> </li>");
} else {
todocount++;
$('ol').prepend("<li><div></div></div><input type='checkbox'><p>" + n.title + "</p><a href='javascript:;' id=" + i + "></a> </li>");
}
});
$('#todocount').text(todocount);
$('#donecount').text(donecount);
}
})
还需要jquery.min.js 去下载即可