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 相关文章推荐
js和jquery中获取非行间样式
May 05 jQuery
Angular2使用jQuery的方法教程
May 28 jQuery
jQuery实现form表单序列化转换为json对象功能示例
May 23 jQuery
jQuery实现点击自身以外区域关闭弹出层功能完整示例【改进版】
Jul 31 jQuery
jQuery序列化form表单数据为JSON对象的实现方法
Sep 20 jQuery
jQuery实现网页拼图游戏
Apr 22 jQuery
Jquery实现无缝向上循环滚动列表的特效
Feb 13 jQuery
jQuery zTree插件使用简单教程
Aug 16 jQuery
layui+jquery支持IE8的表格分页方法
Sep 28 jQuery
JQuery实现ul中添加LI和删除指定的Li元素功能完整示例
Oct 16 jQuery
JQuery样式与属性设置方法分析
Dec 07 jQuery
jQuery 实现扁平式小清新导航
Jul 07 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 批量更新网页内容实现代码
2010/01/05 PHP
thinkphp 一个页面使用2次分页的实现方法
2013/07/15 PHP
PHP改进计算字符串相似度的函数similar_text()、levenshtein()
2014/10/27 PHP
PHP实现二维数组去重功能示例
2017/01/12 PHP
thinkphp中U方法按路由规则生成url的方法
2018/03/12 PHP
ajax的hide隐藏问题解决方法
2012/12/11 Javascript
SyntaxHighlighter 3.0.83使用笔记
2015/01/26 Javascript
jQuery+PHP实现可编辑表格字段内容并实时保存
2015/10/09 Javascript
jQuery查看选中对象HTML代码的方法
2016/06/17 Javascript
jQuery EasyUI编辑DataGrid用combobox实现多级联动
2016/08/29 Javascript
node.js路径处理方法以及绝对路径详解
2021/03/04 Javascript
html判断当前页面是否在iframe中的实例
2016/11/30 Javascript
JavaScript中定义对象原型的两种使用方法
2016/12/15 Javascript
js 数字、字符串、布尔值的转换方法(必看)
2017/04/07 Javascript
Vuejs学习笔记之使用指令v-model完成表单的数据双向绑定
2019/04/29 Javascript
在Express中提供静态文件的实现方法
2019/10/17 Javascript
vue.config.js常用配置详解
2019/11/14 Javascript
Vue实现浏览器打印功能的代码
2020/04/17 Javascript
[04:02]DOTA2上海特锦赛小组赛第二日recap精彩回顾
2016/02/28 DOTA
Python实现PS图像调整之对比度调整功能示例
2018/01/26 Python
python实现周期方波信号频谱图
2018/07/21 Python
Python实现的在特定目录下导入模块功能分析
2019/02/11 Python
python 按钮点击关闭窗口的实现
2020/03/04 Python
python 数据库查询返回list或tuple实例
2020/05/15 Python
Keras中 ImageDataGenerator函数的参数用法
2020/07/03 Python
Pycharm导入anaconda环境的教程图解
2020/07/31 Python
matplotlib交互式数据光标实现(mplcursors)
2021/01/13 Python
一些.net面试题
2014/10/06 面试题
后进生转化工作制度
2014/01/17 职场文书
学习雷锋倡议书
2014/04/15 职场文书
公证委托书
2014/08/01 职场文书
意向协议书
2015/01/27 职场文书
2015年清明节活动总结
2015/02/09 职场文书
2015年置业顾问工作总结
2015/04/07 职场文书
学校教学工作总结2015
2015/05/19 职场文书
电影复兴之路观后感
2015/06/02 职场文书