超强干货！JavaScript实战：DIY你的待办事项管理系统

2023-03-25 06:01:43

如何使用 JavaScript 创建一个简单的待办事项清单应用

在当今快节奏的生活中，有效管理我们的时间和任务至关重要。通过使用 JavaScript 创建一个简单的待办事项清单应用，你可以轻松高效地组织你的工作。本教程将逐步指导你完成这个过程，即使你没有编程经验，你也可以轻松上手。

准备工作

首先，确保你已经安装了文本编辑器（如 Visual Studio Code）和 Node.js。然后，创建一个新的项目文件夹，并打开终端（或命令提示符）窗口，切换到该文件夹。接下来，初始化一个新的 Node.js 项目：

npm init -y

创建 HTML 结构

创建一个名为 index.html 的文件，并添加以下 HTML 代码：

<!DOCTYPE html>
<html>
<head>
  
</head>
<body>
  <h1>我的待办事项清单</h1>
  <ul id="todo-list"></ul>
  <input type="text" id="new-todo" placeholder="添加新任务">
  <button id="add-todo-btn">添加</button>
</body>
</html>

编写 JavaScript 代码

现在，创建一个名为 main.js 的文件，并添加以下 JavaScript 代码：

// 获取必要的元素
const todoList = document.getElementById('todo-list');
const newTodo = document.getElementById('new-todo');
const addTodoBtn = document.getElementById('add-todo-btn');

// 创建一个待办事项数组
let todos = [];

// 添加新待办事项
const addTodo = (e) => {
  e.preventDefault();
  if (newTodo.value.trim()) {
    todos.push(newTodo.value);
    newTodo.value = '';
    renderTodos();
  }
};

// 渲染待办事项列表
const renderTodos = () => {
  todoList.innerHTML = '';
  todos.forEach((todo) => {
    const li = document.createElement('li');
    li.textContent = todo;
    todoList.appendChild(li);
  });
};

// 事件监听器
addTodoBtn.addEventListener('click', addTodo);