你有没有想过这么牛逼的事儿？就是随便在那个输入框扔个待办事项，按个回车，就完事儿了！然后突然发现，它已经悄悄躲进未完成列表了。紧接着一勾选，哎呦喂，它又跑到已完成列表加入大家庭。这不就是一箭双雕！别急，马上揭晓为啥会这样。
，这问题可真重要！咱们每天那么忙，容易糊涂不是？所以，用个小工具帮我们记住点儿事，排排序岂不美哉？
正在进行
已经完成
别担心，就那么回事儿！搞个CSS样式和JS文件就成了。记得，把我们的jQuery文件放在你自己的JS文件上面哈。
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);
}
ol li {
cursor: move;
}
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;
}
}
好，再多问一句。为什么要记笔记本呀？关键在于，只要用同样的浏览器就不怕关闭网页后资料丢失！
这个问题能变得超简单！只要把要的代码写成函数就能搞定。先查查本地有没有现成可用的？如果有，直接拿来用；没有的话，告诉我“没找到”就可以。
function getDate() {
var data = localStorage.getItem("todolist"); // 将获取到的数据赋给data
if(data !== null) { // 如果本地有数据，则返回数据
return JSON.parse(data); // 本地存储只能存储字符串，所以要想获取里边的数据就必须将字符串转换为数组形式返回
} else {
return []; // 如果本地没有数据，则返回一个空数组
}
}
function saveDate(data) {
// 用JSON.stringify()将数组转化成字符串保存到本地存储
localStorage.setItem("todolist", JSON.stringify(data));
}
接下来我们画一下页面，然后还得给它加点东西。首先，先找出之前保存的那些数据来看一看，哪个事情咱们已经做过？如果都做好了，就放去做完的那里呗；如果还有遗漏，那就放进没做完的那部分。同时，我们要设定两个值来记录每个任务的完成情况呀。
好了，那我说说咋整咯。开始，弄个文本框给人家写入待办事项，然后按回车，这样一来，我们得把这个事弄进列表里去。于是，我们得让这文本框和键盘的动作有关联，然后看看到底按没按出13号的回车键（用ASCII值来看哦）。然后，还得把电脑里存储着的信息再弄一遍，最后刷新一下页面哈。
function load() {
var data = getDate(); // 先获取本地存储数据
// 遍历本地存储数据 将他们添加到列表中
$("ol, ul").empty(); // 遍历之前先清空列表
var doneCount = 0; // 已经完成的个数
var todoCount = 0; // 正在进行的个数
$.each(data, function(i, ele) { // i为索引 ele为遍历对象
// 如果复选框被选中（已完成done: true）添加到ul里，未被选中（未完成done: false）添加到ol里
if(ele.done) {
$("ul").prepend("" + ele.title + "
" + ele.title + "
要是想用这个东西删掉你的待办清单，简单得很呐！直接在本地找数字那里，然后索引里剔除就OK。所以说，这ToDoList功能超强，真是帮了大忙，让备忘和事情管理都有序多。还想了解点什么就赶快给我留言！再次感谢大家对我们网站的支持咯！
评论0