在现代的web开发中，待办事项列表是一个常见且实用的功能。它允许用户记录、追踪和完成他们的任务。在这篇文章中，我们将使用纯JavaScript来创建一个简单的待办事项列表。我们会涉及到HTML结构的创建、CSS样式的添加以及JavaScript交互的实现。
步骤1： 创建HTML结构
首先，我们需要在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文件中添加一些样式来美化我们的待办事项列表。例如，我们可以为输入框、按钮和列表项添加样式
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文件中编写代码来实现待办事项的添加和显示功能。我们可以通过为按钮添加一个事件监听器来实现这一点，当按钮被点击时，获取输入框的值，创建一个新的列表项，并将其添加到列表中。
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创建一个待办事项列表！