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中extend函数简单用法示例
Oct 11 jQuery
jquery select插件异步实时搜索实例代码
Oct 20 jQuery
利用JQUERY实现多个AJAX请求等待的实例
Dec 14 jQuery
jQuery实现通过方向键控制div块上下左右移动的方法【测试可用】
Apr 26 jQuery
jquery引入外部CDN 加载失败则引入本地jq库
May 23 jQuery
jQuery实现经典的网页3D轮播图封装功能【附源码下载】
Feb 15 jQuery
jQuery实现动态添加和删除input框实例代码
Mar 26 jQuery
使vue实现jQuery调用的两种方法
May 12 jQuery
jQuery Ajax async=&gt;false异步改为同步时,解决导致浏览器假死的问题
Jul 22 jQuery
jQuery HTML获取内容和属性操作实例分析
May 20 jQuery
jQuery列表动态增加和删除的实现方法
Nov 05 jQuery
html中两种获取标签内的值的方法
Jun 16 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正则匹配html中带class的div并选取其中内容的方法
2015/01/13 PHP
用PHP代码在网页上生成图片
2015/07/01 PHP
详解php中的implements 使用
2017/06/13 PHP
php类自动装载、链式操作、魔术方法实现代码
2017/07/23 PHP
PHP实现动态压缩js与css文件的方法
2018/05/02 PHP
JS处理VBArray的函数使用说明
2008/05/11 Javascript
修改jQuery.Autocomplete插件 支持中文输入法 避免TAB、ENTER键失效、导致表单提交
2009/10/11 Javascript
用js实现计算加载页面所用的时间
2010/04/02 Javascript
JavaScript中number转换成string介绍
2014/12/31 Javascript
Nodejs中的this详解
2016/03/26 NodeJs
jQuery通过deferred对象管理ajax异步
2016/05/20 Javascript
基于JS实现省市联动效果代码分享
2016/06/06 Javascript
Vue数据监听方法watch的使用
2018/03/28 Javascript
vue 刷新之后 嵌套路由不变 重新渲染页面的方法
2018/09/13 Javascript
JS实现购物车基本功能
2020/11/08 Javascript
vue 获取url里参数的两种方法小结
2020/11/12 Javascript
使用python装饰器验证配置文件示例
2014/02/24 Python
Python的Django中将文件上传至七牛云存储的代码分享
2016/06/03 Python
纯python实现机器学习之kNN算法示例
2018/03/01 Python
完美解决python中ndarray 默认用科学计数法显示的问题
2018/07/14 Python
python接口调用已训练好的caffe模型测试分类方法
2019/08/26 Python
Python 余弦相似度与皮尔逊相关系数 计算实例
2019/12/23 Python
pandas-resample按时间聚合实例
2019/12/27 Python
python实现人脸签到系统
2020/04/13 Python
python 将列表里的字典元素合并为一个字典实例
2020/09/01 Python
用纯CSS3实现网页中常见的小箭头
2017/10/16 HTML / CSS
html5 冒号分隔符对齐的实现
2019/07/31 HTML / CSS
美国体育用品商店:Paragon Sports
2017/10/08 全球购物
乌克兰时尚鞋子和衣服购物网站:Born2be
2018/05/24 全球购物
NBA欧洲商店(英国):NBA Europe Store UK
2018/07/27 全球购物
物流专员岗位职责
2014/02/17 职场文书
婚假请假条格式及范文
2014/04/10 职场文书
安全标语口号
2014/06/09 职场文书
房地产端午节活动方案
2014/08/24 职场文书
党员干部廉政承诺书
2015/04/28 职场文书
Elasticsearch 配置详解
2022/04/19 Java/Android