Document

原始地址：https://dev.to/codingnepal/todo-list-app-using-html-css-javascript-5e7p

‘’'嘿朋友们，在这篇博客中，你将学习如何使用HTML CSS和JavaScript创建TodoList应用程序。在之前的博客中，我也分享了
如何使用JavaScript创建Todo应用程序，但是在那个程序中，当你刷新网页时，你添加的列表或任务也会被删除。所以今天我带来了另一篇博客，在这篇博客中我创建了一个Todo应用程序，当你刷新页面时，你添加的列表或任务不会被删除，并且在这个Todo应用程序中还有待处理任务数和你还可以一键删除所有任务的功能。
你可能知道，待办事项列表是你需要完成或想要做的事情的列表，在我们设计的TodoList应用程序，首先，有一个只包含输入字段、一些按钮和文本的content-box。当你输入一些字符并点击加号(+)按钮时，列表将添加到你的任务列表中，并且待处理任务的数量也会更新。你也可以通过点击垃圾桶图标来删除每个列表，记住，这个垃圾桶图标只在鼠标悬停在特定列表上时出现，你还可以一键删除所有的任务。
你可以从给定的框中复制代码，也可以从给定的链接下载代码文件，但我建议你下载源代码文件，而不是复制代码。
点击这里下载代码文件

你可能会喜欢这些:
简单的Todo应用程序
使用PHP的工作ChatBot设计
工作分页UI设计
响应式可筛选图片库

HTML代码：

--> ###### [ ](https://dev.to#css-code) CSS代码： @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@200;300;400;500;600;700&display=swap'); *{ margin: 0; padding: 0; box-sizing: border-box; font-family: 'Poppins', sans-serif; } ::selection{ color: #ffff; background: rgb(142, 73, 232); } body{ width: 100%; height: 100vh; /* overflow: hidden; */ padding: 10px; background: linear-gradient(to bottom, #68EACC 0%, #497BE8 100%); } .wrapper{ background: #fff; max-width: 400px; width: 100%; margin: 120px auto; padding: 25px; border-radius: 5px; box-shadow: 0px 10px 15px rgba(0,0,0,0.1); } .wrapper header{ font-size: 30px; font-weight: 600; } .wrapper .inputField{ margin: 20px 0; width: 100%; display: flex; height: 45px; } .inputField input{ width: 85%; height: 100%; outline: none; border-radius: 3px; border: 1px solid #ccc; font-size: 17px; padding-left: 15px; transition: all 0.3s ease; } .inputField input:focus{ border-color: #8E49E8; } .inputField button{ width: 50px; height: 100%; border: none; color: #fff; margin-left: 5px; font-size: 21px; outline: none; background: #8E49E8; cursor: pointer; border-radius: 3px; opacity: 0.6; pointer-events: none; transition: all 0.3s ease; } .inputField button:hover, .footer button:hover{ background: #721ce3; } .inputField button.active{ opacity: 1; pointer-events: auto; } .wrapper .todoList{ max-height: 250px; overflow-y: auto; } .todoList li{ position: relative; list-style: none; height: 45px; line-height: 45px; margin-bottom: 8px; background: #f2f2f2; border-radius: 3px; padding: 0 15px; cursor: default; overflow: hidden; } .todoList li .icon{ position: absolute; right: -45px; background: #e74c3c; width: 45px; text-align: center; color: #fff; border-radius: 0 3px 3px 0; cursor: pointer; transition: all 0.2s ease; } .todoList li:hover .icon{ right: 0px; } .wrapper .footer{ display: flex; width: 100%; margin-top: 20px; align-items: center; justify-content: space-between; } .footer button{ padding: 6px 10px; border-radius: 3px; border: none; outline: none; color: #fff; font-weight: 400; font-size: 16px; margin-left: 5px; background: #8E49E8; cursor: pointer; user-select: none; opacity: 0.6; pointer-events: none; transition: all 0.3s ease; } .footer button.active{ opacity: 1; pointer-events: auto; } ###### [ ](https://dev.to#javascript-code) JavaScript代码： // 获取所有所需元素 const inputBox = document.querySelector(".inputField input"); const addBtn = document.querySelector(".inputField button"); const todoList = document.querySelector(".todoList"); const deleteAllBtn = document.querySelector(".footer button"); // onkeyup事件 inputBox.onkeyup = ()=>{ let userEnteredValue = inputBox.value; //获取用户输入的值 if(userEnteredValue.trim() != 0){ //如果用户的值不仅仅是空格 addBtn.classList.add("active"); //激活添加按钮 }else{ addBtn.classList.remove("active"); //取消激活添加按钮 } } showTasks(); //调用showTasks函数 addBtn.onclick = ()=>{ //当用户点击加号图标按钮时 let userEnteredValue = inputBox.value; //获取输入字段的值 let getLocalStorageData = localStorage.getItem("New Todo"); //获取本地存储 if(getLocalStorageData == null){ //如果本地存储没有数据 listArray = []; //创建一个空数组 }else{ listArray = JSON.parse(getLocalStorageData); //将json字符串转换为js对象 } listArray.push(userEnteredValue); //在数组中添加新值 localStorage.setItem("New Todo", JSON.stringify(listArray)); //将js对象转换为json字符串 showTasks(); //调用showTasks函数 addBtn.classList.remove("active"); //一旦任务添加完成，取消激活添加按钮 } function showTasks(){ let getLocalStorageData = localStorage.getItem("New Todo"); if(getLocalStorageData == null){ listArray = []; }else{ listArray = JSON.parse(getLocalStorageData); } const pendingTasksNumb = document.querySelector(".pendingTasks"); pendingTasksNumb.textContent = listArray.length; //将数组的长度传递给pendingtask if(listArray.length > 0){ //如果数组的长度大于0 deleteAllBtn.classList.add("active"); //激活删除按钮 }else{ deleteAllBtn.classList.remove("active"); //取消激活删除按钮 } let newLiTag = ""; listArray.forEach((element, index) => { newLiTag += `

• ${element}
• `; }); todoList.innerHTML = newLiTag; //将新的li标签添加到ul标签中 inputBox.value = ""; //一旦任务添加完成，将输入字段留空 } // 删除任务函数 function deleteTask(index){ let getLocalStorageData = localStorage.getItem("New Todo"); listArray = JSON.parse(getLocalStorageData); listArray.splice(index, 1); //删除li localStorage.setItem("New Todo", JSON.stringify(listArray)); showTasks(); //调用showTasks函数 } // 删除所有任务函数 deleteAllBtn.onclick = ()=>{ listArray = []; //清空数组 localStorage.setItem("New Todo", JSON.stringify(listArray)); //将项目设置为本地存储中的项 showTasks(); //调用showTasks函数 }'''