接下来我们将使用HTML、CSS和JavaScript来实现一个简单的待办事项列表管理应用。
HTML 结构：
<!DOCTYPE html>
<html>
<head>
<title>待办事项列表</title>
<link rel="stylesheet" type="text/css" href="styles.css">
</head>
<body>
<h1>待办事项列表</h1>
<div class="container">
<form id="taskForm">
<input id="taskInput" type="text" placeholder="输入任务...">
<button type="submit">添加任务</button>
</form>
<ul id="taskList"></ul>
</div>
<script src="main.js"></script>
</body>
</html>
CSS 样式（styles.css）：
.container {
width: 300px;
margin: 0 auto;
}
form {
display: flex;
margin-bottom: 10px;
}
input[type="text"] {
flex-grow: 1;
padding: 5px;
}
input[type="submit"], button {
padding: 5px 10px;
}
li.completed {
text-decoration: line-through;
}
JavaScript 代码（main.js）：
const taskForm = document.getElementById('taskForm');
const taskInput = document.getElementById('taskInput');
const taskList = document.getElementById('taskList');
let tasks = [];
// 处理表单提交事件
function addTask(event) {
event.preventDefault();
const taskText = taskInput.value.trim();
if (taskText !== '') {
const task = {
id: Date.now(),
text: taskText,
completed: false
};
tasks.push(task);
renderTasks();
taskInput.value = '';
}
}
// 渲染任务列表
function renderTasks() {
taskList.innerHTML = '';
tasks.forEach(task => {
const taskItem = document.createElement('li');
taskItem.dataset.id = task.id;
const taskCheckbox = document.createElement('input');
taskCheckbox.type = 'checkbox';
taskCheckbox.checked = task.completed;
taskCheckbox.addEventListener('change', toggleTaskCompleted);
const taskText = document.createElement('span');
taskText.textContent = task.text;
const deleteBtn = document.createElement('button');
deleteBtn.textContent = '删除';
deleteBtn.addEventListener('click', deleteTask);
if (task.completed) {
taskItem.classList.add('completed');
}
taskItem.appendChild(taskCheckbox);
taskItem.appendChild(taskText);
taskItem.appendChild(deleteBtn);
taskList.appendChild(taskItem);
});
}
// 切换任务完成状态
function toggleTaskCompleted(event) {
const taskId = parseInt(event.target.parentNode.dataset.id);
const taskIndex = tasks.findIndex(task => task.id === taskId);
tasks[taskIndex].completed = !tasks[taskIndex].completed;
renderTasks();
}
// 删除任务
function deleteTask(event) {
const taskId = parseInt(event.target.parentNode.dataset.id);
tasks = tasks.filter(task => task.id !== taskId);
renderTasks();
}
taskForm.addEventListener('submit', addTask);
这个待办事项列表应用允许用户在输入框中添加任务，并能够切换任务的完成状态以及删除任务。每当用户提交表单时，应用会将任务添加到一个数组中，并重新渲染任务列表。
当用户提交任务表单时，addTask() 函数会被调用，其中会获取输入框中的任务文本，并创建一个新的任务对象。该任务对象包含一个唯一的ID、任务文本和一个表示是否已完成的布尔值。然后，将任务对象加入到任务数组中，重新渲染任务列表，并清空输入框。
renderTasks() 函数通过遍历任务数组来生成任务列表项，并根据任务的完成状态添加相应的样式。同时，为复选框和删除按钮添加事件监听器。
toggleTaskCompleted() 函数用于切换任务的完成状态。当复选框的状态发生改变时，它会找到对应的任务，并修改任务对象中的 completed 值。然后，再次调用 renderTasks() 来更新任务列表的显示。
deleteTask() 函数用于删除任务。点击删除按钮时，它会找到对应的任务，并从任务数组中移除该任务。最后，再次调用 renderTasks() 来更新任务列表的显示。
最后，我们使用 addEventListener() 方法监听表单的提交事件，并将其绑定到 addTask() 函数上。
编写代码的时候可以将上述代码保存为三个文件：index.html、main.js 和 styles.css。然后，你可以在浏览器中打开 index.html 文件来运行该应用，测试其功能。
这个例子演示了如何使用JavaScript与DOM互动，以及如何创建、修改和删除HTML元素。这样我们就实现了一个简单的待办事项列表管理应用的功能。
