ToDoList 任务管理工具使用简要教程！

!DOCTYPE html html langzh-CN head meta charsetUTF-8 meta nameviewport contentwidthdevice-width, initial-scale1.0 titleTodoList 待办清单/title !-- 引用外部 CSS 文件relstylesheet 表示这是样式文件href 是 CSS 文件路径 -- link relstylesheet hrefstyle.css /head body !-- 整个TodoList的容器 -- div classcontainer !-- 头部区域标题和输入框 -- div classheader h1TodoList/h1 !-- 输入框添加新事项 -- input typetext placeholder添加事项 idtodoInput /div !-- 今日事项标题区域新增全选框和批量删除按钮 -- div classtodo-title div styledisplay: flex; align-items: center; gap: 8px; h2今日事项/h2 !-- 全选/取消全选复选框 -- input typecheckbox idselectAll label forselectAll stylefont-size: 14px; color: #666;全选/label /div !-- 事项数量 批量删除按钮 -- div styledisplay: flex; align-items: center; gap: 10px; span classcount idtodoCount5/span !-- 批量删除按钮 -- button classbatch-delete-btn批量删除/button /div /div !-- 事项列表保持不变之前已添加删除按钮 -- ul classtodo-list idtodoList li classtodo-item span起床/span div classtodo-actions input typecheckbox classtodo-checkbox button classdelete-btn删除/button /div /li li classtodo-item span吃饭/span div classtodo-actions input typecheckbox classtodo-checkbox button classdelete-btn删除/button /div /li li classtodo-item span上班/span div classtodo-actions input typecheckbox classtodo-checkbox button classdelete-btn删除/button /div /li li classtodo-item span回家/span div classtodo-actions input typecheckbox classtodo-checkbox button classdelete-btn删除/button /div /li li classtodo-item span睡觉/span div classtodo-actions input typecheckbox classtodo-checkbox button classdelete-btn删除/button /div /li /ul !-- 引用外部 JS 文件src 是 JS 文件路径放在 body 末尾确保页面结构先加载 -- script srcscript.js/script /body /html/* 清除默认样式让页面在不同浏览器表现一致 */ * { margin: 0; padding: 0; box-sizing: border-box; font-family: 微软雅黑, sans-serif; } /* 容器样式 - 让内容居中显示 */ .container { max-width: 600px; /* 最大宽度防止在宽屏上太宽 */ margin: 50px auto; /* 上下外边距50px左右自动居中 */ background-color: #f5f5f5; /* 浅灰色背景 */ border-radius: 8px; /* 圆角边框 */ box-shadow: 0 2px 10px rgba(0,0,0,0.1); /* 轻微阴影增加立体感 */ } /* 头部样式 */ .header { background-color: #333; /* 深灰色背景 */ color: white; /* 白色文字 */ padding: 15px 20px; /* 内边距上下15px左右20px */ display: flex; /* 弹性布局让标题和输入框并排 */ justify-content: space-between; /* 两端对齐 */ align-items: center; /* 垂直居中 */ border-radius: 8px 8px 0 0; /* 只让顶部两个角圆角 */ } /* 标题样式 */ .header h1 { font-size: 20px; /* 标题大小 */ font-weight: normal; /* 正常字重不加粗 */ } /* 输入框样式 */ .header input { width: 300px; /* 输入框宽度 */ padding: 8px 10px; /* 内边距 */ border: none; /* 去掉默认边框 */ border-radius: 4px; /* 圆角 */ font-size: 14px; /* 输入文字大小 */ } /* 今日事项区域样式 */ .todo-section { padding: 20px; /* 内边距 */ } /* 今日事项标题样式 */ .todo-title { display: flex; /* 弹性布局让标题和数量并排 */ justify-content: space-between; /* 两端对齐 */ align-items: center; /* 垂直居中 */ margin-bottom: 15px; /* 底部外边距与下面内容隔开 */ } .todo-title h2 { font-size: 18px; /* 标题大小 */ color: #333; /* 深灰色文字 */ } /* 事项数量样式 */ .count { background-color: #666; /* 灰色背景 */ color: white; /* 白色文字 */ width: 20px; /* 宽度 */ height: 20px; /* 高度 */ border-radius: 50%; /* 圆形 */ display: flex; /* 弹性布局 */ justify-content: center; /* 水平居中 */ align-items: center; /* 垂直居中 */ font-size: 12px; /* 文字大小 */ } /* 事项列表样式 */ .todo-list { list-style: none; /* 去掉默认列表圆点 */ } /* 单个事项样式 */ .todo-item { background-color: white; /* 白色背景 */ padding: 12px 15px; /* 内边距 */ margin-bottom: 8px; /* 底部外边距事项之间隔开 */ border-left: 4px solid #4CAF50; /* 左侧绿色边框 */ border-radius: 4px; /* 圆角 */ display: flex; /* 弹性布局让文字和复选框并排 */ justify-content: space-between; /* 两端对齐 */ align-items: center; /* 垂直居中 */ } /* 复选框样式 */ .todo-item input[typecheckbox] { width: 18px; /* 复选框宽度 */ height: 18px; /* 复选框高度 */ cursor: pointer; /* 鼠标悬停时显示手型 */ } /* 事项文字样式 */ .todo-item span { color: #333; /* 深灰色文字 */ font-size: 16px; /* 文字大小 */ } /* 已完成事项的文字样式复选框勾选后 */ .todo-item input[typecheckbox]:checked span { color: #999; /* 浅灰色文字 */ text-decoration: line-through; /* 中划线 */ } /* 事项操作区复选框 删除按钮 容器 */ .todo-actions { display: flex; gap: 10px; /* 复选框和删除按钮之间的间距 */ } /* 删除按钮样式 */ .delete-btn { background-color: #ff4444; /* 红色背景 */ color: white; /* 白色文字 */ border: none; /* 去掉默认边框 */ border-radius: 4px; /* 圆角 */ padding: 4px 8px; /* 内边距 */ font-size: 12px; /* 文字大小 */ cursor: pointer; /* 鼠标悬停显示手型 */ transition: background-color 0.2s; /* 背景色过渡效果hover时更流畅 */ } /* 鼠标悬停在删除按钮上的样式 */ .delete-btn:hover { background-color: #cc0000; /* 加深红色 */ } /* 批量删除按钮样式 */ .batch-delete-btn { background-color: #ff6666; /* 浅红色背景 */ color: white; /* 白色文字 */ border: none; /* 去掉默认边框 */ border-radius: 4px; /* 圆角 */ padding: 4px 10px; /* 内边距 */ font-size: 14px; /* 文字大小 */ cursor: pointer; /* 鼠标悬停显示手型 */ transition: background-color 0.2s; /* 过渡效果 */ } /* 批量删除按钮 hover 效果 */ .batch-delete-btn:hover { background-color: #ff3333; /* 加深红色 */ } /* 全选复选框样式和普通复选框保持一致 */ #selectAll { width: 16px; height: 16px; cursor: pointer; }// 等待页面完全加载后再执行 document.addEventListener(DOMContentLoaded, function() { // 获取页面元素新增全选框和批量删除按钮 const todoInput document.getElementById(todoInput); const todoList document.getElementById(todoList); const todoCount document.getElementById(todoCount); const selectAll document.getElementById(selectAll); // 全选框 const batchDeleteBtn document.querySelector(.batch-delete-btn); // 批量删除按钮 // 1. 新增全选/取消全选功能 selectAll.addEventListener(change, function() { // 获取所有事项的复选框通过类名 todo-checkbox const allTodoCheckboxes document.querySelectorAll(.todo-checkbox); // 全选框的状态勾选/未勾选同步给所有事项复选框 allTodoCheckboxes.forEach(checkbox { checkbox.checked selectAll.checked; }); }); // 2. 新增批量删除功能 batchDeleteBtn.addEventListener(click, function() { // 获取所有被勾选的事项复选框 const checkedCheckboxes document.querySelectorAll(.todo-checkbox:checked); // 判断是否有勾选的事项 if (checkedCheckboxes.length 0) { alert(请先勾选要删除的事项); return; // 没有勾选则不执行后续操作 } // 确认是否删除提升用户体验 if (confirm(确定要删除选中的 ${checkedCheckboxes.length} 个事项吗)) { // 遍历所有被勾选的复选框删除对应的事项 checkedCheckboxes.forEach(checkbox { // 找到复选框对应的事项li const todoItem checkbox.parentNode.parentNode; todoList.removeChild(todoItem); }); // 删除后更新事项数量并且取消全选框的勾选状态 updateCount(); selectAll.checked false; } }); // 3. 原有添加事项功能修改复选框类名添加 todo-checkbox todoInput.addEventListener(keydown, function(event) { if (event.keyCode 13) {//13 是回车键Enter的 keyCode 值 // todoInput.value - 获取输入框的原始值 // .trim() - 清理字符串两端的空白字符 const newTodoText todoInput.value.trim(); if (newTodoText) { const newTodoItem document.createElement(li); newTodoItem.className todo-item; // 复选框添加 todo-checkbox 类名 newTodoItem.innerHTML span${newTodoText}/span div classtodo-actions input typecheckbox classtodo-checkbox button classdelete-btn删除/button /div ; todoList.appendChild(newTodoItem); todoInput.value ; updateCount(); // 给新添加的元素绑定事件 const checkbox newTodoItem.querySelector(.todo-checkbox); checkbox.addEventListener(change, updateCount); const deleteBtn newTodoItem.querySelector(.delete-btn); deleteBtn.addEventListener(click, handleDelete); } } }); // 4. 原有给已有的元素绑定事件修改复选框选择器为 .todo-checkbox const existingItems document.querySelectorAll(.todo-item); existingItems.forEach(item { const checkbox item.querySelector(.todo-checkbox); checkbox.addEventListener(change, updateCount); const deleteBtn item.querySelector(.delete-btn); deleteBtn.addEventListener(click, handleDelete); }); // 5. 原有单个删除功能保持不变 function handleDelete(event) { const todoItem event.target.parentNode.parentNode; if (confirm(确定要删除这个事项吗)) { todoList.removeChild(todoItem); updateCount(); selectAll.checked false; // 删除后取消全选 } } // 6. 原有更新事项数量修改复选框选择器为 .todo-checkbox function updateCount() { const allCheckboxes document.querySelectorAll(.todo-checkbox); let uncompletedCount 0; allCheckboxes.forEach(checkbox { if (!checkbox.checked) { uncompletedCount; } }); todoCount.textContent uncompletedCount; } });