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

2024-12-05 22:34:45

功能：在文本框中输入待办事项按下回车后，事项会出现在未完成列表中；点击未完成事项前边的复选框后，该事项会出现在已完成列表中，反之亦然；点击删除按钮会删除该事项。待办事项的数据是保存到本地存储的（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实现简单的待办事项列表，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对我们网站的支持！
如果你觉得本文对你有帮助，欢迎转载，烦请注明出处，谢谢！

Vuex模块化实现待办事项的状态管理

前言在vue里,组件之间的作用域是独立的,父组件跟子组件之间的通讯可以通过prop属性来传参,但是在兄弟组件之间通讯就比较麻烦了.比如A组件要告诉一件事给B组件,那么A就要先告诉他们的爸组件,然后爸组件再告诉B.当组件比较多,要互相通讯的事情很多的话,爸组件要管他们那么多事,很累的.vuex正是为了解决这个问题,让多个子组件之间可以方便的通讯. 项目介绍待办事项中的一个事件,它可能拥有几个状态,未完成.已完成.已取消或被删除等.这个事件需要在这多种状态之间切换,那么使用vuex来管理也是非常
React+Redux实现简单的待办事项列表ToDoList

使用Redux做了一个简单的ToDoList待办事项列表这个例子也是源于Redux作者Dan Abramov的视频demo 还要特别说明一下我还没有使用react-redux库进行解耦(可能以后加) 也没有拆分成多个文件等等优化为了单纯的练习redux 适合初步学习redux的同学本人学疏才浅,发现可以优化的地方或者问题还请大家指正,谢谢功能样式样子就是这样的在输入框输入待办事项功能很简单鼠标点击Add或者键盘按下Enter输出 ShowAll显示全部待办事项 ShowActi
jQuery模仿ToDoList实现简单的待办事项列表

功能:在文本框中输入待办事项按下回车后,事项会出现在未完成列表中:点击未完成事项前边的复选框后,该事项会出现在已完成列表中,反之亦然:点击删除按钮会删除该事项.待办事项的数据是保存到本地存储的(localStorage),就算关闭页面再打开,数据还是存在的(前提是要用相同浏览器). ToDoList链接: ToDoList-最简单的待办事项列表先把css样式以及js文件引入进来,jQuery文件要写在你自己的js文件上边 <link rel="stylesheet" href=
使用JavaScript制作待办事项列表的示例代码

目录 JavaScript待办事项列表如何制作JavaScript待办事项列表第 1 步: 项目的基本结构第 2 步: 使用 HTML 创建一个输入位置第 3 步: 制作查看 Todo 文本的列表第 4 步: 使用 JavaScript 激活待办事项列表 JavaScript 解释 JavaScript待办事项列表我在此处展示了有关如何使用 JavaScript创建待办事项列表 HTML 的完整信息和教程.我借助HTML 和 CSS来设计它.在 JavaScript 的帮助下实现.
jQuery模仿单选按钮选中效果

刚开始学jquery,工作中有些css表单中的按钮美化很麻烦,所以想着用jquery来替换,复选框的jquery很容易,就是简单的样式切换效果,用toggleClass()方法即可. 而单选框之前一直不知道怎么做,因为在单选框中选中一个,其他的都必须移除掉样式,如果2个单选框在同级中则用siblings()则可直接找到其他单选框移除掉样式即可.鉴于自己工作是循环列表模式,每个<li>里面都带有一个单选框,未发现jquery中parent()这个好用的方法,以致于纠结了半天. css如下: &l
jQuery表单验证简单示例

本文实例讲述了jQuery表单验证简单用法.分享给大家供大家参考,具体如下: 这几天一直在做一个表单验证的页面,为了达到友好界面,特意去抄了360buy的页面,模仿写了一个页面 jquery 表单验证就是验证表单里面所信息都为必填 //注册页面验证机制 $("#username").focus(function(){ //用focus()表单,当光标在输入框的时候执行下面的代码 $("#username_error").removeClass("erro
jQuery模仿阿里云购买服务器选择购买时间长度的代码

jQuery仿阿里云购买服务器选择时间长度,操作简单,只需点击所要选的时间段.下面给大家展示下效果图,就什么都明白了,如果大家觉得不错,请参考实现代码. 效果图如下: 代码: <!doctype html> <html lang="en"> <head>  <meta charset="UTF-"> <ti
jQuery中extend函数简单用法示例

本文实例讲述了jQuery中extend函数简单用法.分享给大家供大家参考,具体如下: var result=$.extend({},item,item1); extend给对象添加新的属性:js插件经常使用来配置参数 {}:item和item1合并后的结果 item:默认属性 item1:新增属性,如果item1和item属性重合则会覆盖item1中的属性 <span id="Test"></span> var item={"name":&
jquery自适应布局的简单实例

代码整理 - uix.layout.js /** * Grace [jQuery.js] * * UIX页面布局 * 290353142@qq.com * exp: * $.uix.layout();//执行布局 * class="uix-layout-container";//标识布局容器 * class="uix_box";//用于调整布局时将此元素高度铺满父容器(支持设置padding\margin\border) * 例: html1:div中 <d
基于JQuery模仿苹果桌面的Dock效果(初级版)

新的一天新的开始,今天要分享的是用JQuery模仿苹果操作系统桌面的Dock效果,之所以称之为初级版,是因为其中还有一些bug,显示效果并不稳定.由于时间的关系,这些bug还没有修复,希望高手们不吝赐教,提出更好的意见,希望可以做出更好的版本分享给大家. 这是静态的效果图,好吧,看上去还想模像样下面是HTML页面的代码: 复制代码代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w

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

相关推荐

随机推荐