使用JavaScript实现待办事项管理器｜青训营以一个待办事项管理器为例，通过这个项目可以了解如何使用JavaScri

一、前言

以一个待办事项管理器为例，通过这个项目可以了解如何使用JavaScript来创建基本的功能和交互性。

二、实现过程

🚩首先需要一个HTML文件作为项目的主界面。创建一个新的HTML文件，并用以下代码填充它：

<!DOCTYPE html>
<html>
<head>
  <title>待办事项管理器</title>
  <style>
    /* 样式可以根据自己的喜好进行修改 */
    body {
      font-family: Arial, sans-serif;
      margin: 0;
      padding: 0;
    }

    #container {
      max-width: 600px;
      margin: 20px auto;
      padding: 20px;
      border: 1px solid #ccc;
      border-radius: 5px;
    }

    h1 {
      text-align: center;
    }

    input[type="text"] {
      width: 100%;
      padding: 10px;
      margin-bottom: 10px;
    }

    ul {
      list-style-type: none;
      padding: 0;
      margin: 0;
    }

    li {
      display: flex;
      align-items: center;
      margin-bottom: 10px;
    }

    li span {
      flex-grow: 1;
    }

    li button {
      margin-left: 10px;
      padding: 5px 10px;
      border: none;
      border-radius: 5px;
      background-color: #ccc;
      color: #fff;
      cursor: pointer;
    }
  </style>
</head>
<body>
  <div id="container">
    <h1>待办事项管理器</h1>
    <input type="text" id="todoInput" placeholder="添加新任务">
    <ul id="todoList"></ul>
  </div>
  <script src="app.js"></script>
</body>
</html>

🚩接下来需要创建一个名为app.js的JavaScript文件来处理项目的逻辑。在同级目录下创建一个app.js文件，并用以下代码填充它：

// 获取DOM元素
const todoInput = document.getElementById('todoInput');
const todoList = document.getElementById('todoList');

// 用于存储所有待办事项的数组
let todos = [];

// 当输入框中按下回车键时，添加新任务
todoInput.addEventListener('keydown', event => {
  if (event.keyCode === 13) {
    const newTodo = todoInput.value.trim();
    if (newTodo !== '') {
      todos.push(newTodo);
      renderTodos();
      todoInput.value = '';
    }
  }
});

// 渲染所有待办事项
function renderTodos() {
  todoList.innerHTML = '';
  todos.forEach((todo, index) => {
    const li = document.createElement('li');
    const span = document.createElement('span');
    const deleteButton = document.createElement('button');

    // 设置待办事项文本内容
    span.textContent = todo;

    // 添加删除按钮点击事件
    deleteButton.textContent = '删除';
    deleteButton.addEventListener('click', () => {
      todos.splice(index, 1);
      renderTodos();
    });

    // 添加元素到DOM中
    li.appendChild(span);
    li.appendChild(deleteButton);
    todoList.appendChild(li);
  });
}

三、总结

这段代码首先获取了HTML中的输入框和待办事项列表，然后定义了一个todos数组来存储待办事项。接着，当输入框中按下回车键时，会将输入的待办事项添加到todos数组中，并调用renderTodos函数来重新渲染所有待办事项。 renderTodos函数的作用是将todos数组中的待办事项渲染成HTML元素，并添加到待办事项列表中。对于每个待办事项，都会创建一个li元素，其中包含一个span元素用于显示待办事项的文本内容，并添加一个删除按钮。点击删除按钮时，会从todos数组中移除对应的待办事项，并重新渲染。