在现代的web开发中，待办事项列表是一个常见且实用的功能。它允许用户记录、追踪和完成他们的任务。在这篇文章中，我们将使用纯JavaScript来创建一个简单的待办事项列表。我们会涉及到HTML结构的创建、CSS样式的添加以及JavaScript交互的实现。
步骤1： 创建HTML结构
首先，我们需要在HTML文件中定义待办事项列表的结构。我们可以使用一个输入框让用户输入任务，一个按钮来添加任务，以及一个无序列表来显示任务。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Todo List</title> <link rel="stylesheet" href="styles.css"> </head> <body> <div class="container"> <h1>Todo List</h1> <input type="text" id="todoInput" placeholder="Enter a new todo"> <button id="addButton">Add Todo</button> <ul id="todoList"> </ul> </div> <script src="script.js"></script> </body> </html>
步骤2： 添加CSS样式
接下来，我们可以在一个单独的CSS文件中添加一些样式来美化我们的待办事项列表。例如，我们可以为输入框、按钮和列表项添加样式
/* styles.css */ .container { max-width: 600px; margin: 0 auto; padding: 20px; } input[type="text"] { width: 100%; padding: 10px; margin-bottom: 10px; } button { padding: 10px 20px; background-color: #007BFF; color: white; border: none; cursor: pointer; margin-bottom: 10px; } ul { list-style-type: none; padding: 0; } li { padding: 10px; background-color: #F8F9FA; margin-bottom: 5px; }
步骤3： 使用JavaScript实现交互功能
最后，我们需要在JavaScript文件中编写代码来实现待办事项的添加和显示功能。我们可以通过为按钮添加一个事件监听器来实现这一点，当按钮被点击时，获取输入框的值，创建一个新的列表项，并将其添加到列表中。
// script.js document.addEventListener('DOMContentLoaded', function() { const todoInput = document.getElementById('todoInput'); const addButton = document.getElementById('addButton'); const todoList = document.getElementById('todoList'); addButton.addEventListener('click', function() { const todoText = todoInput.value.trim(); // 获取输入框的值并去除前后的空格 if (todoText) { // 如果输入框的值不为空 const listItem = document.createElement('li'); // 创建一个新的列表项元素li listItem.textContent = todoText; // 设置列表项的文本内容为输入框的值 todoList.appendChild(listItem); // 将新的列表项添加到无序列表ul中 todoInput.value = ''; // 清空输入框的值以便用户输入下一个待办事项 } else { alert('Please enter a valid todo'); // 如果输入框的值为空，则显示一个警告消息提醒用户输入有效的待办事项内容。注意这里只是一个简单的错误处理，实际开发中可能需要更友好的用户体验设计。 } }); });
现在，当你打开HTML文件时，你应该能够看到一个简单的待办事项列表应用程序。你可以在输入框中输入任务，点击按钮将其添加到列表中。每个任务都会作为一个新的列表项显示在列表中。当然，这只是一个基本示例，你可以根据自己的需求扩展它，例如添加删除任务的功能、标记任务为已完成的功能等。希望这篇文章能帮助你了解如何使用JavaScript创建一个待办事项列表！
