To-Do List 教程

这是一个关于如何创建 To-Do List 的简单教程。我们将使用 HTML 和 JavaScript 来实现这个功能。

1. HTML 部分

首先，我们需要创建一个简单的 HTML 表单，用户可以在其中输入任务。

<form id="todoForm">
  <input type="text" id="todoInput" placeholder="添加任务...">
  <button type="submit">添加</button>
</form>
<ul id="todoList"></ul>

2. CSS 部分

为了使 To-Do List 更美观，我们可以添加一些简单的 CSS。

#todoForm {
  margin-bottom: 20px;
}

#todoList {
  list-style-type: none;
}

.todo-item {
  background-color: #f9f9f9;
  margin-bottom: 10px;
  padding: 10px;
  border-radius: 5px;
}

3. JavaScript 部分

接下来，我们需要编写 JavaScript 代码来处理用户输入和渲染 To-Do List。

document.getElementById('todoForm').addEventListener('submit', function(e) {
  e.preventDefault();
  const task = document.getElementById('todoInput').value;
  if (task) {
    const listItem = document.createElement('li');
    listItem.className = 'todo-item';
    listItem.textContent = task;
    document.getElementById('todoList').appendChild(listItem);
    document.getElementById('todoInput').value = '';
  }
});

4. 完整代码

将以上三部分代码合并到一起，就可以得到一个简单的 To-Do List 应用程序。

查看完整代码