1. HTML 结构
- 文档类型声明：
这告诉浏览器这是一个 HTML5 文档。<!DOCTYPE html> - HTML 标签：
表示整个页面的内容，<html lang="zh-CN">lang="zh-CN"表示内容使用简体中文。 - 头部信息：
包含页面的元数据，如字符集、视图窗口设置、标题和样式。<head><!-- ... --> </head> - 样式（CSS）：
在<style>标签内定义了页面的样式，包括字体、布局、颜色和响应式设计等。 - 主体内容：
包含网页的所有可见内容。<body><!-- ... --> </body> - 容器：
页面内容被包裹在一个容器内，以便于样式控制和布局。<div class="container"><!-- ... --> </div> - 标题和输入框：
显示应用的标题和一个输入框供用户输入待办事项。<h1>待办事项列表</h1> <input type="text" id="todoInput" placeholder="请输入待办事项"> - 按钮：
两个按钮分别用于添加新的待办事项和清空所有待办事项。<button class="add-btn" onclick="addTodo()">添加待办</button> <button class="clear-btn" onclick="clearTodos()">清空所有</button> - 待办事项列表：
待办事项将显示在这个无序列表内。<ul id="todoList"> </ul>
2. JavaScript 行为
- 添加待办事项 (
addTodo函数)：- 获取输入框的值。
- 检查值是否为空。
- 创建一个新的列表项 (
li)。 - 创建一个删除按钮，并为它绑定点击事件处理函数以从列表中删除对应的待办事项。
- 将待办事项添加到列表中。
- 清空输入框并保存待办事项。
- 清空所有待办事项 (
clearTodos函数)：- 移除列表中的所有子节点。
- 保存待办事项。
- 保存待办事项 (
saveTodos函数)：- 将所有待办事项的文本和完成状态保存到本地存储（
localStorage）。
- 将所有待办事项的文本和完成状态保存到本地存储（
- 加载待办事项 (
loadTodos函数)：- 从本地存储加载待办事项。
- 为每个待办事项创建列表项和删除按钮，并恢复其完成状态。
- 将待办事项添加到列表中。
- 编辑待办事项（通过双击列表项）：
- 弹出对话框让用户编辑待办事项文本。
- 更新列表项的文本并保存待办事项。
- 切换完成状态（通过点击列表项）：
- 为列表项添加或移除
completed类。 - 保存待办事项。
- 为列表项添加或移除
当页面加载时，loadTodos 函数会被调用，从本地存储加载待办事项并显示在页面上。
3. 展示效果
4. 源代码
<!DOCTYPE html>
<html lang="zh-CN">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>待办事项列表</title><style>body {font-family: Arial, sans-serif;}.container {max-width: 600px;margin: 0 auto;padding: 20px;}input[type="text"] {width: 100%; /* 使输入框宽度与容器宽度一致 */padding: 10px; /* 增加内边距 */margin-bottom: 10px; /* 添加底部外边距 */border: 1px solid #ddd; /* 设置边框样式 */}button {padding: 10px; /* 使按钮内边距与输入框一致 */border: none; /* 移除边框 */background-color: #4CAF50; /* 设置背景颜色 */color: white; /* 设置文字颜色 */cursor: pointer; /* 设置鼠标样式为指针 */margin-bottom: 10px; /* 添加底部外边距 */}button:hover {background-color: #45a049; /* 鼠标悬停时改变背景颜色 */}ul {list-style: none;padding: 0;}li {margin: 10px 0;padding: 10px;background-color: #f9f9f9;border: 1px solid #ddd;position: relative; /* 为待办事项设置相对定位 */}.delete-btn {background-color: #f44336;color: white;border: none;padding: 5px 10px;cursor: pointer;position: absolute; /* 为删除按钮设置绝对定位 */right: 10px; /* 将删除按钮定位到右下角 */bottom: 10px; /* 将删除按钮定位到右下角 */width: calc(100% / 6); /* 设置删除按钮宽度为待办框的六分之一 */}.completed {text-decoration: line-through;color: #aaa;}.add-btn {background-color: #4CAF50;color: white;border: none;padding: 10px 20px;font-size: 16px;cursor: pointer;margin-top: 20px;}.clear-btn {background-color: #f0ad4e;color: white;border: none;padding: 10px 20px;font-size: 16px;cursor: pointer;margin-top: 20px;}.clear-btn:hover {background-color: #ec971f;}
</style></head>
<body><div class="container"><h1>待办事项列表</h1><input type="text" id="todoInput" placeholder="请输入待办事项"><button class="add-btn" onclick="addTodo()">添加待办</button><button class="clear-btn" onclick="clearTodos()">清空所有</button><ul id="todoList"></ul></div><script>function addTodo() {const todoInput = document.getElementById('todoInput');const todoList = document.getElementById('todoList');const todoText = todoInput.value.trim();if (todoText === '') {alert('请输入待办事项！');return;}const li = document.createElement('li');li.textContent = todoText;const deleteBtn = document.createElement('button');deleteBtn.className = 'delete-btn';deleteBtn.textContent = '删除';deleteBtn.onclick = function() {todoList.removeChild(li);saveTodos();};li.appendChild(deleteBtn);<!--li.ondblclick = function() {<!-- const editText = prompt("编辑待办事项:", li.textContent);<!-- if (editText !== null && editText.trim() !== '') {<!-- li.textContent = editText;<!-- }<!-- saveTodos();<!--};<!--li.onclick = function() {li.classList.toggle('completed');saveTodos();};todoList.appendChild(li);todoInput.value = '';saveTodos();}function clearTodos() {const todoList = document.getElementById('todoList');while (todoList.firstChild) {todoList.removeChild(todoList.firstChild);}saveTodos();}function saveTodos() {const todos = [];document.querySelectorAll('#todoList li').forEach(function(li) {todos.push({text: li.textContent.replace('删除', '').trim(),completed: li.classList.contains('completed')});});localStorage.setItem('todos', JSON.stringify(todos));}function loadTodos() {const todos = JSON.parse(localStorage.getItem('todos'));if (todos) {todos.forEach(function(todo) {const li = document.createElement('li');li.textContent = todo.text;if (todo.completed) {li.classList.add('completed');}const deleteBtn = document.createElement('button');deleteBtn.className = 'delete-btn';deleteBtn.textContent = '删除';deleteBtn.onclick = function() {li.remove();saveTodos();};li.appendChild(deleteBtn);li.ondblclick = function() {const editText = prompt("编辑待办事项:", li.textContent);if (editText !== null && editText.trim() !== '') {li.textContent = editText;}saveTodos();};li.onclick = function() {li.classList.toggle('completed');saveTodos();};document.getElementById('todoList').appendChild(li);});}}loadTodos();</script>
</body>
</html>
