Todo List App 示例

这是一个简单的 Todo List 应用示例，展示如何使用 HTML、CSS 和 JavaScript 创建一个基本的待办事项列表。

功能

添加待办事项
删除待办事项
完成待办事项

如何使用

在文本框中输入待办事项内容。
点击 "Add" 按钮将其添加到列表中。
点击待办事项旁边的复选框来标记它为完成。
点击 "Delete" 按钮来删除待办事项。

代码示例

以下是一个简单的 Todo List 应用示例代码：

<!DOCTYPE html>
<html>
<head>
  <title>Todo List App</title>
  <style>
    /* CSS 样式 */
    .todo-list {
      padding: 20px;
      list-style: none;
    }
    .todo-item {
      margin-bottom: 10px;
    }
    .completed {
      text-decoration: line-through;
    }
  </style>
</head>
<body>
  <h1>Todo List</h1>
  <input type="text" id="todo-input" placeholder="Enter a todo item">
  <button onclick="addTodo()">Add</button>
  <ul id="todo-list" class="todo-list"></ul>

  <script>
    // JavaScript 代码
    function addTodo() {
      var input = document.getElementById('todo-input');
      var todoText = input.value;
      if (todoText.trim() !== '') {
        var todoItem = document.createElement('li');
        todoItem.className = 'todo-item';
        todoItem.innerHTML = `<input type="checkbox" onclick="toggleComplete(this)"> ${todoText} <button onclick="deleteTodo(this)">Delete</button>`;
        document.getElementById('todo-list').appendChild(todoItem);
        input.value = '';
      }
    }

    function toggleComplete(element) {
      var todoItem = element.parentElement;
      todoItem.classList.toggle('completed');
    }

    function deleteTodo(element) {
      element.parentElement.remove();
    }
  </script>
</body>
</html>

扩展阅读

更多关于 HTML、CSS 和 JavaScript 的教程，请访问我们的开发者文档。