待办事项清单上的JavaScript项目

简介

待办事项清单是目前很受欢迎的任务管理工具，它能够帮助用户管理日常的任务和事项，并随时跟踪任务的完成情况。在这个JavaScript项目中，我们将介绍如何使用JavaScript实现一个待办事项清单。

功能说明

这个待办事项清单可以实现以下功能：

• 添加待办事项
• 删除待办事项
• 标记待办事项为已完成和未完成
• 显示待办事项的数量和已完成的数量
• 全选和全不选待办事项
• 过滤待办事项，只显示全部、已完成或未完成的任务

实现步骤

1. 准备工作

在HTML代码中，我们需要创建一个表单，用于添加待办事项，以及一个列表，用于显示待办事项。表单中需要一个输入框和一个提交按钮，列表中需要一个复选框、一个文本描述任务内容和一个删除按钮。

<form id="task-form">
  <input type="text" id="task-input" placeholder="添加任务...">
  <button type="submit" class="btn">添加</button>
</form>

<ul id="task-list" class="list">
  
</ul>

2. 添加待办事项

当用户在输入框中输入任务内容并点击提交按钮后，我们需要通过JavaScript代码获取输入框的值，创建一个新的待办事项，并将其加入到列表中。同时，我们需要更新待办事项的数量。

const taskForm = document.getElementById('task-form');
const taskInput = document.getElementById('task-input');
const taskList = document.getElementById('task-list');
const taskCount = document.getElementById('task-count');
const taskFilter = document.getElementById('task-filter');

taskForm.addEventListener('submit', addTask);

function addTask(e) {
  e.preventDefault();

  if (taskInput.value.trim() === '') {
    alert('请输入任务');
    return;
  }

  const taskItem = document.createElement('li');
  taskItem.className = 'task-item';

  const taskCheckbox = document.createElement('input');
  taskCheckbox.type = 'checkbox';

  const taskDescription = document.createElement('span');
  taskDescription.innerText = taskInput.value;

  const taskDelete = document.createElement('button');
  taskDelete.className = 'btn delete-task';
  taskDelete.innerText = '删除';

  taskItem.appendChild(taskCheckbox);
  taskItem.appendChild(taskDescription);
  taskItem.appendChild(taskDelete);
  taskList.appendChild(taskItem);

  taskInput.value = '';

  updateTaskCount();
}

3. 删除待办事项

当用户点击某个待办事项的删除按钮时，我们需要通过JavaScript代码找到该待办事项并将其从列表中删除。同时，我们需要更新待办事项的数量。

taskList.addEventListener('click', deleteTask);

function deleteTask(e) {
  if (!e.target.classList.contains('delete-task')) {
    return;
  }

  const taskItem = e.target.closest('.task-item');
  taskList.removeChild(taskItem);

  updateTaskCount();
}

4. 标记待办事项为已完成和未完成

当用户点击某个待办事项的复选框时，我们需要通过JavaScript代码找到该待办事项并将其标记为已完成或未完成。同时，我们需要更新待办事项的数量。

taskList.addEventListener('change', toggleTaskStatus);

function toggleTaskStatus(e) {
  if (!e.target.matches('input[type="checkbox"]')) {
    return;
  }

  const taskItem = e.target.closest('.task-item');
  taskItem.classList.toggle('completed');

  updateTaskCount();
}

5. 显示待办事项的数量和已完成的数量

在界面的底部，我们需要实时显示当前待办事项的数量和已完成的数量，以便用户了解当前任务的完成情况。

function updateTaskCount() {
  const totalTasks = taskList.children.length;
  const completedTasks = taskList.querySelectorAll('.completed').length;

  taskCount.innerText = `${completedTasks}/${totalTasks}`;
}

6. 全选和全不选待办事项

在界面的顶部，我们需要添加两个按钮，用于全选和全不选待办事项。当用户点击全选按钮时，我们需要将所有待办事项标记为已完成；当用户点击全不选按钮时，我们需要将所有待办事项标记为未完成。

const selectAllButton = document.getElementById('select-all');
const deselectAllButton = document.getElementById('deselect-all');

selectAllButton.addEventListener('click', selectAllTasks);
deselectAllButton.addEventListener('click', deselectAllTasks);

function selectAllTasks() {
  for (let taskItem of taskList.children) {
    taskItem.classList.add('completed');
  }

  updateTaskCount();
}

function deselectAllTasks() {
  for (let taskItem of taskList.children) {
    taskItem.classList.remove('completed');
  }

  updateTaskCount();
}

7. 过滤待办事项

在界面的顶部，我们需要添加一个下拉框，用于过滤待办事项，用户可以选择只显示全部、已完成或未完成的任务。当用户选择某个过滤选项时，我们需要通过JavaScript代码将相应的待办事项显示或隐藏。

taskFilter.addEventListener('change', filterTasks);

function filterTasks() {
  const selectedOption = taskFilter.value;

  for (let taskItem of taskList.children) {
    switch (selectedOption) {
      case 'all':
        taskItem.style.display = 'block';
        break;
      case 'completed':
        if (taskItem.classList.contains('completed')) {
          taskItem.style.display = 'block';
        } else {
          taskItem.style.display = 'none';
        }
        break;
      case 'not-completed':
        if (!taskItem.classList.contains('completed')) {
          taskItem.style.display = 'block';
        } else {
          taskItem.style.display = 'none';
        }
        break;
    }
  }
}

结语

到此为止，我们已经成功实现了一个简单的待办事项清单。通过这个JavaScript项目的实践，我们深入了解了JavaScript的DOM操作、事件处理和基本语法，希望对大家学习和掌握JavaScript有所帮助。