需求分析:
① 文本框里面输入内容,按下回车,就可以生成待办事项。
② 点击待办事项复选框,就可以把当前数据添加到已完成事项里面。
③ 点击已完成事项复选框,就可以把当前数据添加到待办事项里面。
④ 但是本页面内容刷新页面不会丢失

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;}
}
 <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 &copy; 2023 todolist</footer>

① 刷新页面不会丢失数据,因此需要用到本地存储 localStorage
② 核心思路: 不管按下回车,还是点击复选框,都是把本地存储的数据加载到页面中,这样保证刷新关闭页面不会丢失数据
③ 存储的数据格式:var todolist = [{ title : ‘xxx’, done: false}]
注意点1: 本地存储 localStorage 里面只能存储字符串格式 ,因此需要把对象转换为字符串 JSON.stringify(data)。
注意点2: 获取本地存储数据,需要把里面的字符串转换为对象格式JSON.parse() 我们才能使用里面的数据
1.toDoList 按下回车把新数据添加到本地存储里面
① 切记: 页面中的数据,都要从本地存储里面获取,这样刷新页面不会丢失数据,所以先要把数据保存到本地存储里面。
② 利用事件对象.keyCode判断用户按下回车键(13)。
③ 声明一个数组,保存数据。

$("#title").on("keydown", function(event) {if (event.keyCode === 13) {if ($(this).val() === "") {alert("请输入您要的操作");} else {// 先读取本地存储原来的数据var local = getDate();}});

④ 先要读取本地存储原来的数据(声明函数 getData()),放到这个数组里面。
⑤ 之后把最新从表单获取过来的数据,追加到数组里面。

 // 读取本地存储的数据 function getDate() {var data = localStorage.getItem("todolist");if (data !== null) {// 本地存储里面的数据是字符串格式的 但是我们需要的是对象格式的return JSON.parse(data);} else {return [];}}

⑥ 最后把数组存储给本地存储 (声明函数 savaDate())

 // 保存本地存储数据function saveDate(data) {localStorage.setItem("todolist", JSON.stringify(data));}

2.toDoList 本地存储数据渲染加载到页面
① 因为后面也会经常渲染加载操作,所以声明一个函数 load,方便后面调用
② 先要读取本地存储数据。(数据不要忘记转换为对象格式)
③ 之后遍历这个数据($.each()),有几条数据,就生成几个小li 添加到 ol 里面。

// 渲染加载数据function load() {// 读取本地存储的数据var data = getDate();console.log(data);// 遍历之前先要清空ol里面的元素内容$("ol, ul").empty();var todoCount = 0; // 正在进行的个数var doneCount = 0; // 已经完成的个数// 遍历这个数据$.each(data, function(i, n) {// console.log(n);if (n.done) {$("ul").prepend("<li><input type='checkbox' checked='checked' > <p>" + n.title + "</p> <a href='javascript:;' id=" + i + " ></a></li>");doneCount++;} else {$("ol").prepend("<li><input type='checkbox' > <p>" + n.title + "</p> <a href='javascript:;' id=" + i + " ></a></li>");todoCount++;}});

④ 每次渲染之前,先把原先里面 ol 的内容清空,然后渲染加载最新的数据。

 // 遍历之前先要清空ol里面的元素内容$("ol").empty();

3.toDoList 删除操作
① 点击里面的a链接,不是删除的li,而是删除本地存储对应的数据。
② 核心原理:先获取本地存储数据,删除对应的数据,保存给本地存储,重新渲染列表li
③ 我们可以给链接自定义属性记录当前的索引号

$("ol, ul").on("click", "a", function() {// 先获取本地存储var data = getDate();console.log(data);// 修改数据var index = $(this).attr("id");});
$("ul").prepend("<li><input type='checkbox' checked='checked' > <p>" + n.title + "</p> <a href='javascript:;' id=" + i + " ></a></li>");

④ 根据这个索引号删除相关的数据----数组的splice(i, 1)方法,从i的位置开始删除,删除一位
⑤ 存储修改后的数据,然后存储给本地存储
⑥ 重新渲染加载数据列表

 data.splice(index, 1);// 保存到本地存储
saveDate(data);// 重新渲染页面
load();

⑦ 因为a是动态创建的,我们使用on方法绑定事件
4.toDoList 正在进行和已完成选项操作
① 当我们点击了小的复选框,修改本地存储数据,再重新渲染数据列表。
② 点击之后,获取本地存储数据。
③ 修改对应数据属性 done 为当前复选框的checked状态。
④ 之后保存数据到本地存储
⑤ 重新渲染加载数据列表
⑥ load 加载函数里面,新增一个条件,如果当前数据的done为true 就是已经完成的,就把列表渲染加载到 ul 里面
⑦ 如果当前数据的done 为false, 则是待办事项,就把列表渲染加载到 ol 里面

 // 4. toDoList 正在进行和已完成选项操作$("ol, ul").on("click", "input", function() {// alert(11);// 先获取本地存储的数据var data = getDate();// 修改数据var index = $(this).siblings("a").attr("id");console.log(index);// data[?].done = ?data[index].done = $(this).prop("checked");console.log(data);// 保存到本地存储saveDate(data);// 重新渲染页面load();});

5.toDoList 统计正在进行个数和已经完成个数
① 在我们load 函数里面操作
② 声明2个变量 :todoCount 待办个数 doneCount 已完成个数
③ 当进行遍历本地存储数据的时候, 如果 数据done为 false, 则 todoCount++, 否则 doneCount++
④ 最后修改相应的元素 text()

$("#todocount").text(todoCount);
$("#donecount").text(doneCount);

整合js代码:

$(function() {// alert(11);// 1. 按下回车 把完整数据 存储到本地存储里面// 存储的数据格式  var todolist = [{title: "xxx", done: false}]load();$("#title").on("keydown", function(event) {if (event.keyCode === 13) {if ($(this).val() === "") {alert("请输入您要的操作");} else {// 先读取本地存储原来的数据var local = getDate();// console.log(local);// 把local数组进行更新数据 把最新的数据追加给local数组local.push({ title: $(this).val(), done: false });// 把这个数组local 存储给本地存储saveDate(local);// 2. toDoList 本地存储数据渲染加载到页面load();$(this).val("");}}});// 3. toDoList 删除操作$("ol, ul").on("click", "a", function() {// alert(11);// 先获取本地存储var data = getDate();console.log(data);// 修改数据var index = $(this).attr("id");console.log(index);data.splice(index, 1);// 保存到本地存储saveDate(data);// 重新渲染页面load();});// 4. toDoList 正在进行和已完成选项操作$("ol, ul").on("click", "input", function() {// alert(11);// 先获取本地存储的数据var data = getDate();// 修改数据var index = $(this).siblings("a").attr("id");console.log(index);// data[?].done = ?data[index].done = $(this).prop("checked");console.log(data);// 保存到本地存储saveDate(data);// 重新渲染页面load();});// 读取本地存储的数据 function getDate() {var data = localStorage.getItem("todolist");if (data !== null) {// 本地存储里面的数据是字符串格式的 但是我们需要的是对象格式的return JSON.parse(data);} else {return [];}}// 保存本地存储数据function saveDate(data) {localStorage.setItem("todolist", JSON.stringify(data));}// 渲染加载数据function load() {// 读取本地存储的数据var data = getDate();console.log(data);// 遍历之前先要清空ol里面的元素内容$("ol, ul").empty();var todoCount = 0; // 正在进行的个数var doneCount = 0; // 已经完成的个数// 遍历这个数据$.each(data, function(i, n) {// console.log(n);if (n.done) {$("ul").prepend("<li><input type='checkbox' checked='checked' > <p>" + n.title + "</p> <a href='javascript:;' id=" + i + " ></a></li>");doneCount++;} else {$("ol").prepend("<li><input type='checkbox' > <p>" + n.title + "</p> <a href='javascript:;' id=" + i + " ></a></li>");todoCount++;}});$("#todocount").text(todoCount);$("#donecount").text(doneCount);}
})

toDoList最简单待办事项案例的实现相关推荐

  1. Javascript实现待办事项案例

    <!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8" ...

  2. 鸿蒙开发-从搭建todolist待办事项来学习组件与js之间的交互

    场景 鸿蒙开发-实现页面跳转与页面返回: https://blog.csdn.net/BADAO_LIUMANG_QIZHI/article/details/118383025 在上面实现从主页面跳转 ...

  3. To Do List (待办事项)

    To Do List (待办事项) 上篇博客中我们讲到了浏览器的本地存储,因为没有列出具体的实例让大家操作,所以肯定还有一部分人是没有彻底明白的,那么今天这篇博客,就通过一个案例来让大家好好了解一下什 ...

  4. html待办事项表格代码,jQuery待办事项列表

    我使用jQuery(和JS当然)编写的简单待办事项列表. 我已经创建了静态待办事项列表,只有通过编辑代码才能添加新项目.从逻辑上讲,我现在要创建一个动态列表.jQuery待办事项列表 我已经尝试了一些 ...

  5. ToDoList—最简单的待办事项列表(经典案例)重点

    代码运行结果 案例说明 案例分析 案例实现代码 tdlist.html代码 <!DOCTYPE html> <html><head><meta http-eq ...

  6. 用jQuery--实现todolist待办事项清单

    效果图 实现todolist整体思路: 思路图如果看着不方便 js代码里面已经做好详细注释 html代码 <!DOCTYPE html> <html><head>& ...

  7. react待办事项_使用React创建一个简单的待办应用

    react待办事项 You could be wondering what is so special about React; What we will do is pick up from a p ...

  8. 基于Vue的新拟态ToDoList(待办事项添加)

    简介 基于Vue半全家桶的新拟态板ToDoList(点击访问在线地址),一个todolist而已,用几乎Vue全家桶是不是有点小题大做,是的,必须的,因为要巩固的知识,并且功能也相应的增加了,你可以打 ...

  9. windows桌面待办事项_有没有一款使用简单的电脑桌面待办事项提醒软件

    云菲在大学时养成了一个习惯,就是使用便签记录老师布置的学习任务,这样既不会出现纰漏,也可以让大脑减负,而且还能在学业上投入更多的精力.进入职场后,这个习惯一直没有改变,但是问题也就随之而来了. 因为已 ...

最新文章

  1. 【Verilog HDL 训练】第 10 天(PWM 呼吸灯)
  2. PyQt5 技术篇-QWidget、Dialog设置界面固定大小、不可拉伸方法实例演示
  3. 码农·如何成为一位数据科学家(第17期)pdf
  4. 【ruoyi若依】引入activiti 模块
  5. linux定时任务实例,linux定时任务访问url实例
  6. 删除重复记录处理(转)
  7. Html富文本编辑器
  8. 学会这一招,轻松玩转 app 中混合应用自动化测试
  9. 汇编语言与计算机体系结构
  10. 关于Asp.Net中的返回的操作
  11. java学习心得与体会(自我鼓励)
  12. 经济数学线性代数第三版课后习题答案
  13. WebAssembly系列2-为什么我们需要WebAssembly—采访Brendan Eich
  14. 艺术字体手绘,如何进行创作呢
  15. 无法使用XXXX附加到应用程序解决办法
  16. matlab 张德风,Matlab图形界面图像的旋转、平移和缩放
  17. 静态网络爬虫之Xpath学习
  18. DevExpress 皮肤控件 更换皮肤
  19. 微信公众号推文发布方法(内涵详细步骤)
  20. 谈谈你对web语义化的理解

热门文章

  1. 漫谈 Clustering (1): k-means
  2. 产品经理————关于市场调研。
  3. php中rowcount 意思,SQL中@@ROWCOUNT函数
  4. oracle aq 删除,创建及删除AQ table时候报错 ORA-00955,ORA-24005,ORA-24002 - 2
  5. 【JS从入门到精通】08-构造函数与原型对象
  6. 人生苦短、我爱python_人生苦短,我爱Python007——基本语法(5)
  7. ZigBee组网学习笔记(三 )--协议栈串口实验
  8. 大咖云集,闭门畅谈 | 2021 CLSF 大会圆满落幕
  9. 2018社区计算机考试题,2018年社区工作者考试模拟题―行测全卷试题(4.10)
  10. Ubuntu:让桌面显示回收站