文章目录

    • 项目需求
    • HTML结构
    • JavaScript逻辑
      • 添加待办事项
      • 标记待办事项
      • 删除待办事项
      • 保存待办事项
    • 总结

在此章节中，我们将学习如何使用JavaScript创建一个简单的网页应用。这将是一个待办事项列表应用，用户可以添加新的待办事项，标记已完成的事项，以及删除事项。通过这个项目，我们将学习如何使用JavaScript操作DOM，处理事件，以及使用localStorage进行数据存储。

项目需求

我们的待办事项列表应用需要满足以下需求：

  1. 用户可以在输入框中输入待办事项，然后点击添加按钮，将待办事项添加到列表中。
  2. 用户可以点击待办事项旁边的复选框，将待办事项标记为已完成。
  3. 用户可以点击待办事项旁边的删除按钮，将待办事项从列表中删除。
  4. 用户关闭浏览器后，待办事项列表的状态应该被保存下来，用户再次打开浏览器时，应该能看到之前的待办事项。

HTML结构

首先，我们需要创建HTML页面的基本结构。我们需要一个输入框，一个添加按钮，以及一个待办事项列表。

<!DOCTYPE html><html><head><title>Todo List</title></head><body><input id="todoInput" type="text" placeholder="What needs to be done?"><button id="addButton">Add</button><ul id="todoList"></ul><script src="app.js"></script></body></html>

在这个HTML文件中，我们有一个input元素用于输入待办事项，一个button元素用于添加待办事项，以及一个ul元素用于显示待办事项列表。我们还包含了一个外部的JavaScript文件app.js，这个文件将包含我们的应用逻辑。

JavaScript逻辑

接下来，我们需要编写JavaScript代码来实现应用的逻辑。我们首先需要获取HTML元素的引用，然后对这些元素进行操作。

var todoInput = document.getElementById('todoInput');var addButton = document.getElementById('addButton');var todoList = document.getElementById('todoList');

添加待办事项

我们需要监听添加按钮的点击事件。当点击事件发生时，我们创建一个新的待办事项，并添加到列表中。

addButton.addEventListener('click', function() {var todoText = todoInput.value; // 获取待办事项的文本todoInput.value = ''; // 清空输入框var todoItem = document.createElement('li'); // 创建一个新的li元素todoItem.textContent = todoText; // 设置li元素的文本var checkbox = document.createElement('input'); // 创建一个新的input元素checkbox.type = 'checkbox'; // 设置input元素的类型为checkboxtodoItem.prepend(checkbox); // 将checkbox添加到li元素的前面var deleteButton = document.createElement('button'); // 创建一个新的button元素deleteButton.textContent = 'Delete'; // 设置button元素的文本todoItem.append(deleteButton); // 将button添加到li元素的后面todoList.append(todoItem); // 将li元素添加到列表中});

在这个代码中，我们首先获取待办事项的文本，然后清空输入框。然后，我们创建一个新的li元素，并设置其文本。我们还创建了一个复选框和一个删除按钮，并添加到li元素中。最后，我们将li元素添加到列表中。

标记待办事项

我们需要监听复选框的点击事件。当点击事件发生时，我们将待办事项标记为已完成。

todoList.addEventListener('change', function(event) {if (event.target.type === 'checkbox') {var checkbox = event.target;var todoItem = checkbox.parentElement;todoItem.style.textDecoration = checkbox.checked ? 'line-through' : 'none';}});

在这个代码中，我们监听了列表的change事件。当复选框的状态改变时，change事件会被触发。我们检查事件的目标是否是复选框，如果是，我们获取复选框和其父元素（即li元素），然后根据复选框的状态来修改li元素的样式。

删除待办事项

我们需要监听删除按钮的点击事件。当点击事件发生时，我们将待办事项从列表中删除。

todoList.addEventListener('click', function(event) {if (event.target.tagName === 'BUTTON') {var button = event.target;var todoItem = button.parentElement;todoList.removeChild(todoItem);}});

在这个代码中，我们监听了列表的click事件。当删除按钮被点击时，click事件会被触发。我们检查事件的目标是否是按钮，如果是，我们获取按钮和其父元素（即li元素），然后从列表中删除li元素。

保存待办事项

我们需要使用localStorage来保存待办事项的状态。当添加、标记或删除待办事项时，我们需要更新localStorage。

首先，我们需要在页面加载时，从localStorage中读取待办事项的状态，并更新列表。

window.addEventListener('load', function() {var todos = JSON.parse(localStorage.getItem('todos')) || [];for (var i = 0; i < todos.length; i++) {var todo = todos[i];createTodoItem(todo.text, todo.completed);}});

在这个代码中，我们监听了load事件。当页面加载时，我们从localStorage中读取待办事项的状态，然后用这些状态来创建待办事项。

然后，我们需要在添加、标记或删除待办事项时，更新localStorage。

function updateLocalStorage() {var todos = [];var todoItems = todoList.children;for (var i = 0; i < todoItems.length; i++) {var todoItem = todoItems[i];var text = todoItem.textContent;var completed = todoItem.querySelector('input').checked;todos.push({ text: text, completed: completed });}localStorage.setItem('todos', JSON.stringify(todos));}

在这个函数中，我们遍历待办事项列表，然后将每个待办事项的文本和完成状态保存到一个数组中。然后，我们将这个数组转换为JSON字符串，并保存到localStorage中。

我们需要在添加、标记或删除待办事项的事件处理函数中，调用这个函数。

addButton.addEventListener('click', function() {// ...updateLocalStorage();});todoList.addEventListener('change', function(event) {// ...updateLocalStorage();});todoList.addEventListener('click', function(event) {// ...updateLocalStorage();});

总结

通过这个项目，我们学习了如何使用JavaScript来创建一个简单的网页应用。我们学习了如何操作DOM，处理事件，以及使用localStorage进行数据存储。这是一个很好的实践项目，通过它我们可以更好地理解和应用JavaScript的基本概念。

在接下来的章节中，我们将深入学习更多关于JavaScript的知识。希望你在学习的过程中能够找到乐趣，并且通过学习JavaScript，开启你的编程之旅！