todolist本地存储实现版(html+css+JQuery)
emmm,这个demo应该是我学习完jQuery之后的一个小总结吧,具体实现了:
-
todolist这个添加任务的功能
-
todolist这个标记任务完成的功能
-
本地储存的功能(没钱租服务器(bushi[毕竟只是个小demo,平时自己用用应该没问题,前提是浏览器的记录不清楚…]
题外话:可能有些人觉得都2022年了,怎么还有人在玩 传统框架 ,本人认为既然是一个框架嘛,对于一个初学者来学学也没什么大问题
话不多说下面是本demo的html部分
[中间不好在代码中解释以及需要另外解释的地方将以 @[numer] 来标记]
<!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">
<title>Document</title>
<link rel="stylesheet" href="css/index.css">
<script src="js/jquery.min.js"></script>
<script src="js/index.js"></script>
<!--话说各位应该都知道下面这个use strict是干什么的吧-->
<script>"use strict"</script>
<style>
<!--经典去除margin和padding,便于定位布局-->
<!--body 的有些样式是可以继承的,因此为了方便,直接先写了样式-->
body {
margin: 0;
padding: 0;
font-size: 16px;
background: #cdcdcd;
}
</style>
</head>
<body>
<header>
<section>
<!-- required是让该元素在提交时必须有内容 -->
<!-- autocomplete是让浏览器不自动记录表单值 -->
<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是用来记录未完成的计划的,里面的内容是用jQuery以后动态生成的-->
<ol id="todolist" class="demo-box">
</ol>
<h2>已经完成 <span id="doneCount"></span></h2>
<!--同理,这里是用来记录已经完成并标记的的内容,当然里面也包含一个判断框和一个超链接-->
<ul id="donelist">
</ul>
</section>
<!--footer部分-->
<footer>
Copyright © 2014 todolist.cn used by 2022 YJY
</footer>
<noscript>sorry,你的浏览器不支持javascipt语言</noscript>
</body>
</html>
emmm,下面是繁琐的css环节
header {
height: 50px;
background: #333;
}
/*这里好像并没有设置宽度呢??,为什么呢,主要是后面用了一点点的响应式布局*/
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;
/*这里使input设置了内外两个阴影,为什么要这么做呢,问就是为了更加美观*/
box-shadow: 0 1px 0 rgba(255,255,255,.24),0 1px 6px rgba(0,0,0,.45) inset;
border: none;
/*日常取消input的选定样式*/
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 {
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;
/*注意这里用了一个小技巧,使链接的背景和边框的颜色不同并且边框用了
double属,众所周知doule定义了双边框功能,使a链接跟美观了*/
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;
}
/*响应式布局功能*/
/* 注:max-device-width是设备整个显示区域的宽度,例如,真实的设备屏幕宽度。 */
@media screen and (max-device-width: 620px) {
section {
width: 96%;
padding: 0 2%;
}
}
/* 下面为浏览器宽度>620px时实行 */
@media screen and (min-width: 620px) {
section {
width: 600px;
padding: 0 10px;
}
}
下面是最最重要的js部分
(今天码字累了,解释明天再上(bushi),先贴代码,勤奋的我已经上注释了╮( ̄﹏ ̄)╭
/*前提知识,下面主要是用Jquery来实现(如果没学过可能看起来有点累,但是不代表看不懂,大佬肯定
能触类旁通)*/
$(function () {
/*load()是一个重新加载页面的函数,因为这个是通过本地储存的,所以每次更改都是更改本地的数据,
所以每次更新完之后都要重新加载,当然也可以搭配AJAX来使用是吧,但是我没有租服务器,又不想去搞那些
乱七八糟的公用服务器*/
/*当然在这里的作用就是在页面开始加载时渲染页面*/
load();
//下面是输入是保存数据
$('#title').on('keydown', function (event) {
//判断是不是按了回车键并且内容是不为空的
if (event.keyCode === 13 && $(this).val() !== '') {
//getDate()是获取本地数据的一个函数,在下面
var local = getDate();
//push是数组里添加元素的方法,title是文字内容,done是用来储存是不是完成的
//可能有人会想输入的肯定是未完成的,为什么要加呢
//想一想万一以后使其变成了完成的该怎么办呢,肯定要来一个参数来判断啊
local.push({
title: $(this).val(),
done: false
});
//对应上文,是一个储存数据的自定义函数
saveDate(local);
load();
//清空文本框的内容
$(this).val('');
}
});
//emm,本地存储里面只能存储字符串的数据格式 把我们的数组对象转换为字符串格式 JSON.stringify()
//如果不行可以不套这个函数试试,会发现输出的只有object,并没有具体的内容
//获取本地存储的数据 我们需要把里面的字符串数据转换为 对象格式 JSON.parse()
function saveDate(local) {
localStorage.setItem('todolist', JSON.stringify(local));
}
function getDate() {
var data = localStorage.getItem('todolist');
if (data !== null) {
return JSON.parse(data);
}
else {
return [];
}
}
//这里是为了绑定a元素的一个编号,为了以后能够点击判断是哪个元素,然后执行删除操作
//这里用父元素委托事件是因为a是动态生成的,因此用这个方法能完成绑定操作,注意不能直接给a绑定
$('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 load() {
//获取现在是本地数据
var data = getDate();
// console.log(data);
//清空原来已完成和未完成的所有内容
//下面重新渲染
$('ol').empty();
$('ul').empty();
//记录已完成和未完成两者的个数
var todoCount=0,doneCount=0;
$.each(data, function (i, n) {
if (data[i].done === true) {
doneCount++;
//这里用了朴素的添加li的方式,当然这里可以使用模板字符来实现,有兴趣的可以试试
$('ul').prepend('<li><input type="checkbox" checked="checked"><p>' + n.title + '</p><a href="javascript:;" id=' + i + '></a></li>');
}
else {
todoCount++;
$('ol').prepend('<li><input type="checkbox"><p>' + n.title + '</p><a href="javascript:;" id=' + i + '></a></li>');
}
// console.log(n);
})
//渲染数量
$('#todoCount').text(todoCount);
$('#doneCount').text(doneCount);
}
})
可以去my_github去下载少量解释版的源码来观看