一、项目需求分析
我们要创建一个待办事项列表应用，它应具备以下功能：
- 能够添加新的待办事项。
- 可以删除已有的待办事项。
- 能标记待办事项为已完成状态，并且有相应的视觉呈现（如划掉已完成事项）。
二、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>待办事项列表</title>
<style>
/* 这里可以添加一些基本的样式，比如列表的样式等 */
ul {
list-style-type: none;
padding: 0;
}
li {
margin: 5px 0;
border: 1px solid #ccc;
padding: 5px;
}
button {
margin-left: 5px;
}
.completed {
text-decoration: line-through;
}
</style>
</head>
<body>
<h1>待办事项列表</h1>
<input type="text" id="newTaskInput" placeholder="添加新的待办事项">
<button id="addTaskButton">添加任务</button>
<ul id="taskList">
<!-- 这里后续会通过JavaScript动态添加待办事项 -->
</ul>
<script src="script.js"></script>
</body>
</html>
在上述 HTML 中：
- 有一个输入框用于输入新的待办事项内容。
- 一个按钮用于触发添加任务的操作。
- 一个无序列表用于展示待办事项，初始为空，后续会通过 JavaScript 动态添加列表项。
三、JavaScript 实现功能
接下来创建一个名为 script.js 的 JavaScript 文件，与上述 HTML 文件在同一目录下，并添加以下代码：
收起
javascript
复制
// 1. 获取相关DOM元素
const newTaskInput = document.getElementById('newTaskInput');
const addTaskButton = document.getElementById('addTaskButton');
const taskList = document.getElementById('taskList');
// 2. 添加任务功能
addTaskButton.addEventListener('click', function () {
const taskText = newTaskInput.value;
if (taskText!== '') {
// 创建新的列表项
const newTaskLi = document.createElement('li');
newTaskLi.textContent = taskText;
// 创建删除按钮
const deleteButton = document.createElement('button');
deleteButton.textContent = '删除';
deleteButton.addEventListener('click', function () {
taskList.removeChild(newTaskLi);
});
// 创建完成按钮
const completeButton = document.createElement('button');
completeButton.textContent = '完成';
completeButton.addEventListener('click', function () {
newTaskLi.classList.add('completed');
});
// 将删除按钮和完成按钮添加到列表项中
newTaskLi.appendChild(deleteButton);
newTaskLi.appendChild(completeButton);
// 将新的列表项添加到任务列表中
taskList.appendChild(newTaskLi);
// 清空输入框
newTaskInput.value = '';
}
});
在上述 JavaScript 代码中：
-
首先通过
document.getElementById方法获取了输入框、添加按钮和任务列表等相关的 DOM 元素。 -
然后给添加任务按钮添加了一个点击事件监听器。当点击按钮时：
-
获取输入框中的文本内容，如果不为空：
-
创建一个新的列表项元素，并设置其文本内容为输入框中的待办事项文本。
-
创建一个删除按钮，给它添加一个点击事件监听器，当点击删除按钮时，会从任务列表中移除对应的列表项。
-
创建一个完成按钮，给它添加一个点击事件监听器，当点击完成按钮时，会给对应的列表项添加一个
completed类名，通过 CSS 样式设置，会呈现出划掉已完成事项的视觉效果。 -
将删除按钮和完成按钮添加到新创建的列表项中。
-
最后将新的列表项添加到任务列表中，并清空输入框，以便输入下一个待办事项。
-
-
这样，我们就通过 JavaScript 实现了一个简单的待办事项列表应用，具备了添加、删除和标记完成待办事项的功能。你可以根据实际需求进一步扩展和完善这个应用，比如添加本地存储功能以便在页面刷新后保留待办事项数据等。
