下面是一个任务管理器项目示例，可以帮助你了解如何使用JavaScript实现任务添加、删除和标记为完成的功能。
首先，我们来创建HTML结构以及一些基本的样式。代码如下：
<!DOCTYPE html>
<html>
<head>
<title>任务管理器</title>
<style>
.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;
}
ul {
list-style-type: none;
padding: 0;
margin: 0;
}
li.completed {
text-decoration: line-through;
}
</style>
</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>
接下来，我们将实现JavaScript代码来处理任务的添加、删除和标记为完成的功能。代码如下：
// 获取页面元素
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来创建交互式的任务管理器，并逐步构建更复杂的应用程序。
