青训营笔记四：使用JavaScript实现交互式待办事项列表
JavaScript是一种强大的脚本语言，广泛应用于Web开发中。本文将通过一个完整的项目实例，演示如何使用JavaScript来实现一个交互式的待办事项列表。我们将从头开始构建这个项目，展示如何解决问题并逐步完善功能，从而展示JavaScript在实际应用中的优势与魅力。
项目概述：
待办事项列表是一种常见的应用，用于帮助人们组织、追踪和管理任务。我们的目标是通过JavaScript创建一个交互式的待办事项列表，用户可以添加、编辑、标记完成和删除任务。
项目步骤：
1、搭建基本HTML结构
首先，我们创建一个简单的HTML结构，包含一个输入框用于添加新任务，以及一个用于显示任务的列表。同时，为了方便CSS样式的引用，我们连接一个外部CSS文件。
<!DOCTYPE html>
<html>
<head>
<title>交互式待办事项列表</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<h1>我的待办事项</h1>
<input type="text" id="taskInput" placeholder="添加新任务...">
<ul id="taskList"></ul>
<script src="script.js"></script>
</body>
</html>
2、添加JavaScript功能
在这一步中，我们将使用JavaScript来实现任务的添加、显示、编辑、完成标记和删除功能。我们首先创建一个名为script.js的文件，并在其中添加以下代码：
// 获取输入框和任务列表的引用
const taskInput = document.getElementById('taskInput');
const taskList = document.getElementById('taskList');
// 监听输入框按下回车键事件
taskInput.addEventListener('keypress', function (event) {
if (event.key === 'Enter' && taskInput.value.trim() !== '') {
addTask(taskInput.value);
taskInput.value = '';
}
});
// 添加新任务
function addTask(taskText) {
const li = document.createElement('li');
const span = document.createElement('span');
const editButton = document.createElement('button');
const deleteButton = document.createElement('button');
span.textContent = taskText;
editButton.textContent = '编辑';
deleteButton.textContent = '删除';
editButton.addEventListener('click', function () {
editTask(li, span);
});
deleteButton.addEventListener('click', function () {
deleteTask(li);
});
li.appendChild(span);
li.appendChild(editButton);
li.appendChild(deleteButton);
taskList.appendChild(li);
}
// 编辑任务
function editTask(taskElement, taskSpan) {
const newTaskText = prompt('编辑任务', taskSpan.textContent);
if (newTaskText !== null && newTaskText.trim() !== '') {
taskSpan.textContent = newTaskText;
}
}
// 删除任务
function deleteTask(taskElement) {
taskElement.remove();
}
3、完善功能
现在，我们的待办事项列表已经能够添加任务、编辑任务和删除任务。但是，为了更好的用户体验，我们还可以增加标记完成的功能。
首先，在HTML文件中添加一个用于标记完成的按钮：
<button>完成</button>
然后，在script.js中修改addTask函数：
function addTask(taskText) {
// ...
const completeButton = document.createElement('button');
completeButton.textContent = '完成';
completeButton.addEventListener('click', function () {
taskElement.classList.toggle('completed');
});
li.appendChild(completeButton);
taskList.appendChild(li);
}
最后，在CSS文件（styles.css）中添加样式以标记已完成的任务：
.completed {
text-decoration: line-through;
}
结论：
通过这个完整的项目实例，我们演示了如何使用JavaScript实现一个交互式的待办事项列表。从构建HTML结构开始，逐步添加JavaScript功能，我们实现了任务的添加、编辑、完成标记和删除。这个项目不仅帮助读者了解如何使用JavaScript处理DOM元素，还展示了JavaScript在Web开发中的实用性和灵活性。读者可以通过进一步扩展和优化这个项目，深入探索JavaScript的强大功能，从而在实际项目中更加得心应手。
腾讯一面2195人在聊
投递嘉士伯等公司10个岗位