使用JavaScript实现简单的待办事项列表 | 青训营

用户902748394120
239 阅读3分钟

待办事项列表是我们日常生活中常见的需求之一。在这篇实践记录笔记中，我将使用JavaScript来实现一个简单的待办事项列表应用。我们将实现添加待办事项、标记完成和删除待办事项的功能。 首先，我们需要创建一个HTML页面，包含一个输入框用于添加新的待办事项，以及一个列表用于展示当前的待办事项。在底部还需要添加一个按钮，用于清空所有已完成的事项。

<!DOCTYPE html>
<html>
<head>
  <title>待办事项列表</title>
</head>
<body>
  <h1>待办事项列表</h1>
  <input type="text" id="todoInput" placeholder="添加新事项">
  <button onclick="addTodo()">添加</button>
  <ul id="todoList"></ul>
  <button onclick="clearCompleted()">清空已完成</button>

  <script src="script.js"></script>
</body>
</html>

接下来，我们需要在JavaScript文件中实现相应的功能。首先，我们创建一个空的数组来存储待办事项：

const todos = [];

然后，我们实现添加待办事项的函数addTodo()：

function addTodo() {
  const todoInput = document.getElementById('todoInput');
  const todoText = todoInput.value;

  if (todoText) {
    const todo = {
      id: Date.now(),
      text: todoText,
      completed: false
    };

    todos.push(todo);
    renderTodos();
    todoInput.value = '';
  }
}

在这个函数中，我们首先获取输入框中的文本，然后创建一个待办事项对象，并将其添加到todos数组中。最后，我们调用renderTodos()函数来重新渲染待办事项列表，并清空输入框的内容。 接下来，我们实现渲染待办事项列表的函数renderTodos()：

function renderTodos() {
  const todoList = document.getElementById('todoList');
  todoList.innerHTML = '';

  todos.forEach(todo => {
    const todoItem = document.createElement('li');

    if (todo.completed) {
      todoItem.innerHTML = `<s>${todo.text}</s>`;
    } else {
      todoItem.textContent = todo.text;
    }

    todoItem.addEventListener('click', () => {
      toggleTodoCompletion(todo.id);
    });

    todoList.appendChild(todoItem);
  });
}

在这个函数中，我们首先清空待办事项列表，然后遍历todos数组，为每个待办事项创建一个新的列表项，并根据其完成状态添加相应的样式。同时，我们为每个列表项添加了一个点击事件监听器，用于切换待办事项的完成状态。 最后，我们实现切换待办事项完成状态的函数toggleTodoCompletion()和清空已完成事项的函数clearCompleted()：

function toggleTodoCompletion(todoId) {
  const todo = todos.find(todo => todo.id === todoId);
  todo.completed = !todo.completed;
  renderTodos();
}

function clearCompleted() {
  const completedTodos = todos.filter(todo => todo.completed);
  completedTodos.forEach(todo => {
    const index = todos.indexOf(todo);
    todos.splice(index, 1);
  });
  renderTodos();
}

个人思考：

通过这个简单的待办事项列表应用实践，我深刻理解到了JavaScript在前端开发中的重要性和灵活性。通过JavaScript的DOM操作，我们可以方便地实现各种交互功能，提升用户体验。此外，JavaScript还具有丰富的数组和对象操作方法，使得数据的增删改查变得更加简洁高效。

分析的原创内容：

在实现待办事项列表的过程中，我们使用了一个数组来存储待办事项。这种数据结构非常适合存储多个具有相同属性的对象，并且具备动态增删元素的能力。通过使用数组，我们可以方便地进行待办事项的添加、删除和修改操作。 此外，我们还使用了事件监听器来响应用户的交互操作。通过给待办事项列表项添加点击事件监听器，我们可以在用户点击时执行相应的操作。这种事件驱动的编程方式使得我们的应用更加灵活和响应式。

总结：

通过这个简单的待办事项列表应用实践，我学会了如何使用JavaScript实现基本的DOM操作、数组操作以及事件监听器的使用。这些知识对于我在前端开发中构建交互性强的应用非常有帮助。同时，我也体会到了JavaScript作为一门灵活的编程语言，能够提供丰富的工具和功能来解决实际问题。

avatar
文章
阅读
粉丝