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

为了演示如何使用JavaScript来实现功能，我们将创建一个简单的待办事项列表应用程序。

1. HTML结构： 首先，我们需要在HTML中创建一个待办事项列表的容器，包括一个输入框和一个按钮，用于添加新的待办事项。另外，我们还需要一个用于展示待办事项的列表。

<input type="text" id="todoInput" placeholder="输入待办事项">
<button id="addBtn">添加</button>

<ul id="todoList"></ul>

2. JavaScript实现： 接下来，我们使用JavaScript来实现待办事项列表的功能。我们将使用事件监听器和DOM操作来实现添加和展示待办事项。

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

// 待办事项列表
const todos = [];

// 添加待办事项
function addTodo() {
  const todoText = todoInput.value;
  if (todoText.trim() !== '') {
    // 创建新的待办事项对象
    const todo = {
      id: Date.now(),
      text: todoText,
      completed: false
    };

    // 添加到待办事项列表
    todos.push(todo);

    // 渲染待办事项
    renderTodoList();

    // 清空输入框
    todoInput.value = '';
  }
}

// 渲染待办事项列表
function renderTodoList() {
  // 清空列表
  todoList.innerHTML = '';

  // 遍历待办事项数组，创建并添加列表项
  todos.forEach(todo => {
    const listItem = document.createElement('li');
    listItem.innerText = todo.text;
    if (todo.completed) {
      listItem.classList.add('completed');
    }
    listItem.addEventListener('click', () => {
      toggleTodoStatus(todo.id);
    });
    todoList.appendChild(listItem);
  });
}

// 切换待办事项的状态
function toggleTodoStatus(id) {
  const todoIndex = todos.findIndex(todo => todo.id === id);
  if (todoIndex !== -1) {
    todos[todoIndex].completed = !todos[todoIndex].completed;
    renderTodoList();
  }
}

// 添加按钮的点击事件
addBtn.addEventListener('click', addTodo);

通过上述代码，我们创建了一个简单的待办事项列表应用程序。输入框中的文本将被添加为新的待办事项，并在列表中展示出来。点击每个待办事项，会切换其完成状态。

通过这个示例项目，我们演示了如何使用JavaScript来实现一个功能，即创建待办事项列表。我们使用了事件监听器和DOM操作来实现待办事项的新增和展示，并提供了切换待办事项状态的功能。

这个实例项目展示了JavaScript在创建简单应用程序中的能力，以及如何使用DOM操作来实现动态交互。通过这样的实践，我们可以加深对JavaScript的理解，并能够运用它来解决实际问题。