可以实现数据的存储
先把代码放在这,有空再写分析
<!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>
<!-- <link rel="stylesheet" href="bootstrap.min.css"> -->
<!-- <script src="jqury.js"></script> -->
<script src="jquery.min.js"></script>
<!-- <script src="bootstrap.min.js"></script> -->
<style>
body {
margin: 0;
padding: 0;
font-size: 16px;
background: #CDCDCD;
}
header {
height: 50px;
background: #333;
background: rgba(47, 47, 47, 0.98);
}
section {
margin: 0 auto;
}
label {
float: left;
width: 100px;
line-height: 50px;
color: #DDD;
font-size: 24px;
cursor: pointer;
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
}
header input {
float: right;
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
}
input:focus {
outline-width: 0
}
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;
}
ol,
ul {
padding: 0;
list-style: none;
}
li input {
position: absolute;
top: 2px;
left: 10px;
width: 22px;
height: 22px;
cursor: pointer;
}
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);
display: none;
}
ol li {
cursor: move;
}
/* ol li input{
position: absolute;
top: 0;
left: 2px;
} */
/* ol li p{
position: absolute;
top: 0;
right: 2px;
} */
ul 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;
}
footer {
color: #666;
font-size: 14px;
text-align: center;
}
footer a {
color: #666;
text-decoration: none;
color: #999;
}
@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 for="title">ToDoList</label>
<input type="text" id="title" name="title" placeholder="添加ToDo" required="required" autocomplete="off" />
</section>
</header>
<section>
<h2>正在进行 <span id="todocount"></span></h2>
<ol id="todolist" class="demo-box">
</ol>
<h2>已经完成 <span id="donecount"></span></h2>
<ul id="donelist">
</ul>
</section>
<footer>
Copyright © 2014 todolist.cn
</footer>
<script>
var todo = []
var done = []
function gettodo() {
if (localStorage.getItem('todo')) {
todo = localStorage.getItem('todo');
todo = JSON.parse(todo);
return todo;
}
else{
return [];
}
}
function setcount(){
$('#todocount').html(todo.length)
$('#donecount').html(done.length)
}
function getdone() {
if (localStorage.getItem('done')) {
done = localStorage.getItem('done');
done = JSON.parse(done);
return done;
}
else{
return [];
}
}
function owntodo(){
$('#todocount').html(todo.length)
todo = JSON.stringify(todo);
localStorage.setItem('todo', todo)
}
function owndone(){
$('#donecount').html(done.length)
done = JSON.stringify(done);
localStorage.setItem('done', done)
}
todo = gettodo()
$('#todocount').html(todo.length)
for (var i = 0; i < todo.length; i++) {
var lii = creatlii(todo[i])
$('.demo-box').prepend(lii)
$(lii).show()
}
done = getdone()
$('#donecount').html(done.length)
for (var i = 0; i < done.length; i++) {
var lii = creatlii(done[i])
$('ul').prepend(lii)
$(lii).children('input').prop('checked', true)
$(lii).show()
}
$('ol').on('click', 'li a', function () {
todo = gettodo()
todo.splice(todo.length - $(this).parents('li').index() - 1, 1)
owntodo()
$(this).parents('li').slideUp(function () {
$(this).remove()
})
})
$('ul').on('click', 'li a', function () {
done = getdone()
done.splice(done.length - $(this).parents('li').index() - 1, 1)
owndone()
$(this).parents('li').slideUp(function () {
$(this).remove()
})
})
$('ol').on('click', 'input', function () {
todo = gettodo()
todo.splice(todo.length - $(this).parents('li').index() - 1, 1)
$(this).parents('li').slideUp(function () {
$(this).remove()
})
var lii = $('<li></li>');
$(lii).html($(this).parents('li').html())
$(lii).children('input').prop('checked', true)
$('ul').prepend(lii)
$(lii).slideDown()
done = getdone()
done.push($(lii).children('p').html())
owndone()
owntodo()
})
$('ul').on('click', 'input', function () {
done = getdone()
done.splice(done.length - $(this).parents('li').index() - 1, 1)
$(this).parents('li').slideUp(function () {
$(this).remove()
})
var lii = $('<li></li>');
$(lii).html($(this).parents('li').html())
$('ol').prepend(lii)
$(lii).slideDown()
if (localStorage.getItem('todo')) {
todo = localStorage.getItem('todo').split('#')
}
todo = gettodo()
todo.push($(lii).children('p').html())
owndone()
owntodo()
})
function creatlii(value) {
var lii = $('<li></li>')
$(lii).append($('<input type="checkbox" name="" id="">' + ' <p></p>' + ' <a href="javascript:;"></a>'))
$(lii).children('p').html(value)
return lii
}
$('#title').on('keydown', function (e) {
if (e.keyCode == '13') {
if ($(this).val()) {
var lii = creatlii($(this).val())
$('.demo-box').prepend(lii)
$(lii).slideDown()
todo = gettodo()
todo.push($(this).val())
owntodo()
$(this).val('');
}
else {
alert('nishishabi')
}
}
})
</script>
</body>
</html>