【JavaScript】3.1 项目实践：制作一个简单的网页应用

news2024/9/20 16:17:00

文章目录

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

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

项目需求

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

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

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元素的类型为checkbox
  todoItem.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();
});