通过一个简单的项目实例来演示如何使用JavaScript实现一个待办事项（To-Do List）应用。这个应用将能允许用户添加、删除和标记完成的待办事项。
项目背景
在快节奏的现代生活中，我们经常需要记住各种任务和活动。一个简单而有效的待办事项应用可以帮助我们组织日常事务，提高生产力。这个应用将使用纯JavaScript来实现，不依赖任何外部库或框架。
项目需求
- 显示一个输入框，用于输入待办事项。
- 有一个添加按钮，用于将输入的事项添加到待办列表中。
- 待办事项列表显示所有事项。
- 每个事项旁边有一个删除按钮，用于删除该事项。
- 每个事项旁边有一个完成按钮，用于标记该事项为已完成。
HTML结构
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>To-Do List</title>
</head>
<body>
<h1>My To-Do List</h1>
<input type="text" id="new-task" placeholder="Add a new task">
<button onclick="addTask()">Add Task</button>
<ul id="task-list"></ul>
<script src="todo.js"></script>
</body>
</html>
CSS样式（可选）
css
#task-list li {
list-style: none;
margin: 5px 0;
padding: 5px;
background-color: #f4f4f4;
}
button {
margin-left: 10px;
}
.completed {
text-decoration: line-through;
}
JavaScript实现
javascript
// todo.js
function addTask() {
const input = document.getElementById('new-task');
const task = input.value.trim();
if (task) {
const taskList = document.getElementById('task-list');
const listItem = document.createElement('li');
listItem.textContent = task;
const deleteBtn = document.createElement('button');
deleteBtn.textContent = 'Delete';
deleteBtn.onclick = function() {
taskList.removeChild(listItem);
};
const completeBtn = document.createElement('button');
completeBtn.textContent = 'Complete';
completeBtn.onclick = function() {
listItem.classList.toggle('completed');
};
listItem.appendChild(deleteBtn);
listItem.appendChild(completeBtn);
taskList.appendChild(listItem);
input.value = ''; // 清空输入框
} else {
alert('Please enter a task!');
}
}
功能解释
-
HTML：定义了应用的基本结构，包括一个输入框、一个添加按钮和一个用于显示待办事项的列表。
-
CSS：为待办事项列表添加了一些基本样式，使界面更美观。
-
JavaScript：
addTask函数首先获取输入框的值，如果输入不为空，则创建一个新的列表项（<li>）。- 为每个列表项创建“删除”和“完成”按钮，并设置它们的点击事件处理函数。
- “删除”按钮的点击事件处理函数会从列表中移除对应的待办事项。
- “完成”按钮的点击事件处理函数会切换待办事项的样式，标记为已完成。
- 最后，清空输入框以便添加下一个待办事项。
功能增强
- 编辑功能：允许用户编辑已存在的待办事项。
- 优先级标记：让用户能够为待办事项设置优先级。
- 持久化存储：使用本地存储（如localStorage）来保存待办事项，即使刷新页面也不会丢失数据。
- 任务过滤：允许用户根据完成状态过滤待办事项 这个简单的待办事项应用展示了如何使用HTML、CSS和JavaScript来实现一个交互式的Web应用。用户可以动态地添加、删除和标记待办事项，而不需要刷新页面。并且此项目可以根据需要进一步扩展，例如添加持久化存储、编辑功能等。
