jQuery模仿ToDoList实现简单的待办事项列表


Posted in jQuery onDecember 30, 2019

功能:在文本框中输入待办事项按下回车后,事项会出现在未完成列表中;点击未完成事项前边的复选框后,该事项会出现在已完成列表中,反之亦然;点击删除按钮会删除该事项。待办事项的数据是保存到本地存储的(localStorage),就算关闭页面再打开,数据还是存在的(前提是要用相同浏览器)。

ToDoList链接: ToDoList—最简单的待办事项列表

先把css样式以及js文件引入进来,jQuery文件要写在你自己的js文件上边

<link rel="stylesheet" href="css/index.css" rel="external nofollow" >
<script src="js/jquery.min.js"></script>
<script src="js/todolist.js"></script>

HTML代码:

<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 © 2019 
  </footer>
</body>
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;
}
}

  index.css

接下来开始写我们自己的js代码

将多次使用的代码封装成函数,方便使用

①获取本地存储的数据。如果本地有数据则直接获取过来,没有数据的话就返回一个空数组

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));
}

③渲染页面 加载数据

先将本地存储数据获取过来;将他们遍历(遍历之前先将列表清空),看他们是否已经被完成(通过数组里我们自己添加的done的值为true还是false来判断),如果已经被完成则添加到ul列表,否则添加进ol列表里;同时声明两个变量来保存已完成和未完成事项的个数

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("<li><input type='checkbox' checked='checked' > <p>" + ele.title + "</p> <a href='javascript:;' index=" + i + "></a></li>");
      doneCount++; // 每添加一个li,已完成数加一
    } else {
      $("ol").prepend("<li><input type='checkbox'> <p>" + ele.title + "</p> <a href='javascript:;' index=" + i + "></a></li>");
      todoCount++;
    }
  })
  $("#donecount").text(doneCount);
  $("#todocount").text(todoCount);
}

1. 用户输入待办事项按下回车,将事项添加进列表

给文本框绑定键盘按下事件,通过ASCII值来判断用户是否按下了回车(回车的ASCII值为13);

不能直接在本地存储里更改数据,所以要先获取数据(数组形式),把数组进行更新数据(把最新数据追加给数组),再保存到本地存储;

然后对页面进行重新渲染 更新数据

load();  // 第一步先渲染页面,不然一开始刷新页面时列表不显示
$("#title").on("keydown", function(event) {
  if(event.keyCode === 13) {
    if($(this).val() !== "") {
      var data = getDate();    // 获取本地存储数据
      // 把数组进行更新数据,把最新数据追加给数组
      data.push({title: $(this).val(), done: false});
      saveDate(data);   // 保存到本地存储
      load();       // 渲染加载到页面
      $(this).val("");
    }
  }
})

2. 删除待办事项

先获取本地存储数据;

用attr获取自定义属性index(索引)得到用户点击的第几个事项,通过索引删除数组里对应的那组数据;

将更新过的数组保存到本地存储 再渲染给页面

$("ol, ul").on("click", "a", function() {
  var data = getDate();  // 获取本地数据(data是局部变量,不用担心冲突)
  var index = $(this).attr("index");  // 用attr获取自定义属性index,得到索引
  // splice(index, num)删除数组对象 index为开始删除的位置,num为删除几个
  data.splice(index, 1);
  saveDate(data);
  load();
})

3. 用户点击复选框来选择事项已完成或未完成

获取本地存储数据;

通过复选框的兄弟a的index属性来获取用户点击的事项的索引(index),将第index个数据的done属性值修改为复选框的值;

将更新过的数组保存到本地存储 再渲染给页面

$("ol, ul").on("click", "input", function() {
  var data = getDate();
  // 利用a获取用户点击的第几个复选框
  var index = $(this).siblings("a").attr("index");
  // 修改数据:data[索引].属性名 获取固有属性用prop
  data[index].done = $(this).prop("checked");
  saveDate(data);
  load();
})

详细JS代码:

$(function() {
 load();  // 先渲染页面,不然一开始刷新页面时列表不显示
 // 1、绑定键盘按下事件
 $("#title").on("keydown", function(event) {
   if(event.keyCode === 13) {  // 是否按下了回车 回车的ASCII值为13
     if($(this).val() == "") {
       alert("请输入事项内容!")
     } else {
       // 不能直接在本地存储里改数据,所以要先获取数据,然后改变数组,再保存到本地
       var data = getDate();  // 获取本地存储数据
       // 把数组进行更新数据,把最新数据追加给数组
       data.push({title: $(this).val(), done: false});
       saveDate(data);  // 保存到本地存储
       load();  // 渲染加载到页面
       $(this).val("");
     }
   }
 })
 //2、删除待办事项
 $("ol, ul").on("click", "a", function() {
   var data = getDate();  // 获取本地数据
   var index = $(this).attr("index"); // 用attr获取自定义属性,得到索引
   // splice(index, num)删除数组对象 index为开始删除的位置,num为删除几个
   data.splice(index, 1);
   saveDate(data);  // 删除后在把data保存到本地存储
   load();  // 重新渲染页面
 })
 //3、正在进行和已完成
 $("ol, ul").on("click", "input", function() {
   var data = getDate();  // 获取数据
   // 获取用户点击的第几个按钮,利用a 
   var index = $(this).siblings("a").attr("index");
   // 修改数据 data[索引].属性名 获取固有属性用prop
   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) {
   // 用JSON.stringify()将数组转化成字符串保存到本地存储
   localStorage.setItem("todolist", JSON.stringify(data));
 }
 // 渲染加载数据
 function load() {
   var data = getDate();  // 先获取本地存储数据
   // 遍历本地存储数据 将他们添加到列表中
   $("ol, ul").empty();  // 遍历之前先清空列表
   var doneCount = 0; // 已经完成的个数
   var todoCount = 0; // 正在进行的个数
   $.each(data, function(i, ele) {  // i是索引 ele为遍历对象
     // 如果复选框被选中(已完成)添加到ul里,没被选中(未完成)添加到ol里
     if(ele.done) {
       $("ul").prepend("<li><input type='checkbox' checked='checked' > <p>" + ele.title + "</p> <a href='javascript:;' index=" + i + "></a></li>");
       doneCount++;
     } else {
       // 将数据添加进列表里
       $("ol").prepend("<li><input type='checkbox'> <p>" + ele.title + "</p> <a href='javascript:;' index=" + i + "></a></li>");
       todoCount++;
     }
   })
   $("#donecount").text(doneCount);
   $("#todocount").text(todoCount);
 }
})

总结

以上所述是小编给大家介绍的jQuery模仿ToDoList实现简单的待办事项列表,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!
如果你觉得本文对你有帮助,欢迎转载,烦请注明出处,谢谢!

jQuery 相关文章推荐
jQuery实现可拖动进度条实例代码
Jun 21 jQuery
JavaScript之事件委托实例(附原生js和jQuery代码)
Jul 22 jQuery
jquery+css实现下拉列表功能
Sep 03 jQuery
jQuery EasyUI window窗口使用实例代码
Dec 25 jQuery
jQuery实现右侧抽屉式在线客服功能
Dec 25 jQuery
jQuery实现常见的隐藏与展示列表效果示例
Jun 04 jQuery
jQuery实现百度图片移入移出内容提示框上下左右移动的效果
Jun 05 jQuery
js判断复选框是否选中的方法示例【基于jQuery】
Oct 10 jQuery
jQuery操作动画完整实例分析
Jan 10 jQuery
jQuery表单校验插件validator使用方法详解
Feb 18 jQuery
jQuery实现开关灯效果
Aug 02 jQuery
jQuery是用来干什么的 jquery其实就是一个js框架
Feb 04 jQuery
jQuery+PHP+Ajax实现动态数字统计展示功能
Dec 25 #jQuery
JQuery常用选择器功能与用法实例分析
Dec 23 #jQuery
Jquery属性的获取/设置及样式添加/删除操作技巧分析
Dec 23 #jQuery
JQuery中DOM节点的操作与访问方法实例分析
Dec 23 #jQuery
JQuery中的常用事件、对象属性与使用方法分析
Dec 23 #jQuery
jquery实现商品sku多属性选择功能(商品详情页)
Dec 20 #jQuery
基于jQuery实现可编辑的表格
Dec 11 #jQuery
You might like
php正则
2006/07/07 PHP
php中使用Curl、socket、file_get_contents三种方法POST提交数据
2011/08/12 PHP
php 在windows下配置虚拟目录的方法介绍
2013/06/26 PHP
php入门教程之Zend Studio设置与开发实例
2016/09/09 PHP
PHP常见的序列化与反序列化操作实例分析
2019/10/28 PHP
JAVASCRIPT  THIS详解 面向对象
2009/03/25 Javascript
Jquery 插件学习实例1 插件制作说明与tableUI优化
2010/04/02 Javascript
JavaScript 一行代码,轻松搞定浮动快捷留言-V2升级版
2010/04/02 Javascript
表单类各种类型(文本框)失去焦点效果jquery代码
2013/04/26 Javascript
js获取当前页面的url网址信息
2014/06/12 Javascript
node.js中的fs.truncateSync方法使用说明
2014/12/15 Javascript
javascript格式化指定日期对象的方法
2015/04/21 Javascript
JS简单测试循环运行时间的方法
2016/09/04 Javascript
微信小程序中如何使用flyio封装网络请求
2019/07/03 Javascript
[48:37]EG vs OG 2018国际邀请赛小组赛BO2 第一场 8.17
2018/08/18 DOTA
Python下载懒人图库JavaScript特效
2015/05/28 Python
Python出现segfault错误解决方法
2016/04/16 Python
Python实现按照指定要求逆序输出一个数字的方法
2018/04/19 Python
python得到一个excel的全部sheet标签值方法
2018/12/10 Python
python利用小波分析进行特征提取的实例
2019/01/09 Python
详解利用OpenCV提取图像中的矩形区域(PPT屏幕等)
2019/07/01 Python
python3 反射的四种基本方法解析
2019/08/26 Python
详解CSS3的perspective属性设置3D变换距离的方法
2016/05/23 HTML / CSS
北美大型运动类产品商城:Champs Sports
2017/01/12 全球购物
健康监测猫砂:Pretty Litter
2017/05/25 全球购物
GafasWorld哥伦比亚:网上购买眼镜
2017/11/28 全球购物
Groupon比利时官方网站:特卖和网上购物高达-70%
2019/08/09 全球购物
区域销售经理岗位职责
2013/12/10 职场文书
初中校园之声广播稿
2014/01/15 职场文书
个人工作主要事迹
2014/05/08 职场文书
运动会搞笑广播稿
2014/10/14 职场文书
2014年学校法制宣传日活动总结
2014/11/01 职场文书
一般基层干部群众路线教育实践活动个人对照检查材料
2014/11/04 职场文书
聘任证明怎么写
2015/03/02 职场文书
大学生求职信怎么写
2015/03/19 职场文书
2015年保洁工作总结范文
2015/04/28 职场文书