使用JavaScript实现简单的任务管理器应用程序｜青训营需求分析：我们的任务管理器应用程序将允许用户创建、查

需求分析： 我们的任务管理器应用程序将允许用户创建、查看和完成任务。每个任务包括一个标题和一个状态（完成或未完成）。

设计： 在设计阶段，我们需要考虑应用程序的结构和功能。我们将使用HTML、CSS和JavaScript来创建一个基本的用户界面，其中任务的标题和状态都可以编辑和更新。

编码： 下面是一个使用JavaScript实现任务管理器应用程序的简化示例：

<!DOCTYPE html>
<html>
<head>
  <title>任务管理器</title>
  <style>
    /* CSS 样式 */
  </style>
</head>
<body>
  <h1>任务管理器</h1>

  <form id="taskForm">
    <input type="text" id="taskInput" placeholder="输入任务标题" />
    <button type="submit">添加任务</button>
  </form>

  <ul id="taskList">
    <!-- 这里将显示任务列表 -->
  </ul>

  <script>
    // JavaScript 代码
    const taskForm = document.getElementById('taskForm');
    const taskInput = document.getElementById('taskInput');
    const taskList = document.getElementById('taskList');

    taskForm.addEventListener('submit', function(event) {
      event.preventDefault(); // 阻止表单提交的默认行为

      const taskTitle = taskInput.value;
      if (taskTitle) {
        addTask(taskTitle);
        taskInput.value = ''; // 清空输入框
      }
    });

    function addTask(title) {
      const taskItem = document.createElement('li');
      taskItem.textContent = title;
      taskList.appendChild(taskItem);
    }
  </script>
</body>
</html>

在上面的示例中，我们通过JavaScript实现了以下功能：

通过addEventListener方法，监听表单的提交事件。
当表单提交时，阻止默认行为，获取输入框中的任务标题，然后调用addTask函数将任务添加到任务列表中。
addTask函数创建一个新的li元素，设置其内容为任务标题，然后将其添加到任务列表中。

更新状态：

在任务列表中的每个任务项上添加一个状态切换的交互元素，例如复选框或按钮。这将允许用户切换任务的完成状态。

<ul id="taskList">
  <li>
    <input type="checkbox" class="taskStatus" />
    <span class="taskTitle">任务标题</span>
  </li>
  <!-- 其他任务项 -->
</ul>

在JavaScript代码中，获取所有任务项的状态切换元素，并为每个元素添加事件监听器。

const taskStatuses = document.getElementsByClassName('taskStatus');

for (let i = 0; i < taskStatuses.length; i++) {
  taskStatuses[i].addEventListener('change', function () {
    const taskItem = this.parentNode;
    updateTaskStatus(taskItem);
  });
}

创建一个名为updateTaskStatus的函数，该函数将根据任务项的状态进行更新。

function updateTaskStatus(taskItem) {
  const taskTitle = taskItem.querySelector('.taskTitle');
  const isCompleted = taskItem.querySelector('.taskStatus').checked;

  if (isCompleted) {
    taskTitle.style.textDecoration = 'line-through';
  } else {
    taskTitle.style.textDecoration = 'none';
  }
}

在上述代码中，updateTaskStatus函数会获取任务项的标题和状态切换元素，并根据任务的完成状态来更新标题的文本装饰效果。如果任务被标记为已完成，标题将显示为删除线，否则将恢复正常样式。

测试： 在完成代码编写后，我们需要进行测试以确保应用程序按预期工作。打开HTML文件，尝试添加任务并查看其是否显示在任务列表中。

使用JavaScript实现简单的任务管理器应用程序 ｜ 青训营

使用JavaScript实现简单的任务管理器应用程序｜青训营