js实现 todoList

原本用js实现了todoList，包含基本的增删功能，并且实现了本地存储功能，还写的有一个好看的倒计时效果，因为不小心把代码覆盖了，找不回来了，就没有再加倒计时的效果，所以就用jQuery快速完成了这个todoList，虽然用的技术栈是jQuery，但是实现思路和js是一样的

一、作品介绍

1、作品使用到的技术栈

开发工具：Vscode
语言：html、css、jQuery

2、作品实现功能

可以增加事情到未完成事项中
可以删除todoList
点击复选框可以将未完成事项添加到已完成事项中
所有数据都实现了在本地存储

二、作品展示

作品主页

三、作品代码

项目基本结构

html代码

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><link rel="stylesheet" href="../css/todolist.css"><script src="../js/jquery.min.js"></script><script src="../js/todolist.js"></script>
</head><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 &copy; 2014 todolist.cn <a href="javascript:clear();">clear</a></footer>
</body></html>

jQuery代码

$(function() {// 按下回车 把完整的数据 存储到本地存储里面// 存储的数据格式 var todolist = [{title : "xxx", done : false}]load();$("#title").on("keydown", function(event) {if (event.keyCode === 13) {if ($(this).val() === "") {alert("请输入内容");} else {// 先读取本地存储原来的数据var local = getDate();// 把 local 数组进行更新数据 把最新的数据追加给 local 数组local.push({ title: $(this).val(), done: false });// 把这个数组 local  存储给本地存储  传递参数是为了把 local 传递给函数saveDate(local);// toDoList 本地存储数据渲染加载到页面load();$(this).val("");}}});// toDoList 正在进行和已经完成选项操作$("ol, ul").on("click", "input", function() {// 先获取本地存储的数据var data = getDate();// 修改数据var index = $(this).siblings("a").attr("id"); // 获取到表单的兄弟的索引值  attr() 是自定义属性data[index].done = $(this).prop("checked"); // 数组的 done 属性设置为选定状态  peop() 是固有属性// 保存到本地存储saveDate(data);// 重新渲染页面load();})// 删除操作$("ol, ul").on("click", "a", function() {// 获取本地存储var data = getDate();// 修改数据var index = $(this).attr("id"); // 获取每条数据的索引data.splice(index, 1); // 删除本条数据// 保存到本地存储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();// 遍历之前先要清空 ul ol 里面的元素内容 $("ol,ul").empty();var todoCount = 0; // 正在进行的个数var doneCount = 0; // 已经完成的个数// 遍历这个数据$.each(data, function(i, 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);}
})

下面附上作品源码，有需要的小伙伴可以下载

链接: https://pan.baidu.com/s/1BdZRWFyNDE3lP1k6Y8TGpQ?pwd=kej9

提取码: kej9

js实现 todoList相关推荐

（vue基础试炼_03）使用vue.js实现TodoList
接上一篇:(vue基础试炼_02)使用vue.js实现隔2秒显示不同内容https://gblfy.blog.csdn.net/article/details/103841818 指令作用 v-fo ...
js实现TODOlist
js实现todolist 一. 需求分析能显示当前日期输入代办事项,在下列代办列表展示已经完成的代办移入"已完成" 重要事件标红并且置顶能够删除代办事项倒计时二.最终作 ...
15 JS应用-todolist任务
需求 1. 将用户输入添加至待办项 2. 可以对todolist进行分类(待办项和已完成组),用户勾选既将待办项分入已完成组 3. todolist的每一项可删除和编辑 4. 下方有clear按钮,并 ...
适合前端初学者，vue.js完成ToDoList的增删改，支持回车提交增加，及修改时自动获取焦点
重新学习vue,将实例中的ToDoList做了些调整.增加了些功能功能: 1.添加要做事项,支持回车完成添加,也可以点击按钮添加,添加后input清空 2.待做事项,是一个有序列表 3.列表可以删除 ...
源生的html属性js,源生JS怎样实现todolist功能
这次给大家带来源生JS怎样实现todolist功能,源生JS实现todolist功能的注意事项有哪些,下面就是实战案例,一起来看一下. 该项目主要可以练习js操控dom,事件,事件触发之间的逻辑关系, ...
vue写的简单版todolist
上一张丑图: 项目演示地址:http://47.75.195.199/todolist/ 源码地址:https://github.com/chunsenye/... <template>& ...
有趣的HTML实例（七）注册登录界面Ⅱ（css+js）
你知道,有些鸟儿是注定不会被关在牢笼里的,它们的每一片羽毛都闪耀着自由的光辉. --<肖申克的救赎> 目录一.前言二.往期作品回顾三.作品介绍四.本期代码介绍五.效果显示六.编 ...
有趣的HTML实例（十五）注册登录界面（css+js）
我并不是每次吃完饭就看电视,有时我边吃边看电视,生活中有些改变会增加乐趣. --<加菲猫> 目录一.前言二.往期作品回顾三.作品介绍四.本期代码介绍五.效果显示六.编码实现 i ...
html js不触发_「万字整理」这里有一份Node.js入门指南和实践,请注意查收 ??
前言什么是 Node.js 呢 ? JS 是脚本语言,脚本语言都需要一个解析器才能运行.对于写在 HTML 页面里的 JS,浏览器充当了解析器的角色.而对于需要独立运行的 JS,NodeJS 就是一 ...