最近在学习JavaScript的时候，我决定通过做一个小项目来巩固一下所学的内容。于是，我选择了实现一个简单的任务清单应用——就是一个可以记录任务、标记完成、删除任务的列表。这个项目虽然很简单，但涉及到很多基本的JavaScript功能，做完之后感觉自己对JavaScript有了更深的理解。
1. 需求分析：做一个简单的任务清单
首先，来简单梳理一下这个项目的需求：
- 添加任务：用户可以输入任务内容，点击按钮将任务添加到任务列表中。
- 标记任务为完成：点击任务右侧的勾选框，标记任务完成或未完成，任务完成后可以换个样式。
- 删除任务：每个任务旁边都有一个删除按钮，点击删除按钮，任务就会从列表中消失。
看起来很简单吧？接下来就让我们一步步用JavaScript实现这些功能！
2. 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>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="container">
<h1>我的任务清单</h1>
<input type="text" id="task-input" placeholder="添加新任务">
<button id="add-task-btn">添加任务</button>
<ul id="task-list"></ul>
</div>
<script src="script.js"></script>
</body>
</html>
这个结构非常简单，有一个输入框和按钮，下面是任务列表的容器。接下来，我就开始用JavaScript来实现它的功能。
3. JavaScript代码：实现功能
首先，我们需要获取页面中的元素：输入框、按钮和任务列表。然后，我用事件监听器来处理用户的操作。
javascript
复制代码
// 获取页面元素
const taskInput = document.getElementById("task-input");
const addButton = document.getElementById("add-task-btn");
const taskList = document.getElementById("task-list");
// 添加任务功能
addButton.addEventListener("click", function() {
const taskText = taskInput.value.trim();
if (taskText) { // 如果输入框不为空
const li = document.createElement("li");
li.textContent = taskText;
// 添加完成按钮
const completeButton = document.createElement("button");
completeButton.textContent = "完成";
completeButton.addEventListener("click", function() {
li.style.textDecoration = li.style.textDecoration === "line-through" ? "" : "line-through";
});
// 添加删除按钮
const deleteButton = document.createElement("button");
deleteButton.textContent = "删除";
deleteButton.addEventListener("click", function() {
taskList.removeChild(li);
});
li.appendChild(completeButton);
li.appendChild(deleteButton);
taskList.appendChild(li);
taskInput.value = ""; // 清空输入框
}
});
这段JavaScript代码做了以下几件事：
- 获取了页面上输入框、按钮和任务列表的DOM元素。
- 添加了点击“添加任务”按钮的事件监听器，用户输入任务后，创建一个新的
<li>元素，将任务文本显示出来。 - 为每个任务添加了两个按钮：一个是标记为完成的“完成”按钮，另一个是删除按钮。点击“完成”按钮后，任务的文本就会加上删除线；点击“删除”按钮后，任务从列表中删除。
- 最后，任务添加完成后清空输入框。
4. CSS样式：让界面更美观
为了让这个任务清单看起来更好，我加了一点简单的CSS样式：
css
复制代码
body {
font-family: Arial, sans-serif;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
margin: 0;
background-color: #f4f4f9;
}
.container {
background: #fff;
padding: 20px;
border-radius: 8px;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}
input, button {
padding: 10px;
margin: 5px;
border-radius: 5px;
}
button {
cursor: pointer;
border: none;
background-color: #4CAF50;
color: white;
}
button:hover {
background-color: #45a049;
}
ul {
list-style-type: none;
padding: 0;
}
li {
padding: 10px;
margin: 5px 0;
background-color: #f1f1f1;
display: flex;
justify-content: space-between;
align-items: center;
}
li button {
margin-left: 10px;
}
这段CSS简单地美化了页面，给输入框、按钮、列表项加了一些样式，使界面看起来更加整洁。
5. 总结：小项目的收获
通过这个小项目，我学到了如何使用JavaScript动态地操作DOM，如何通过事件监听器响应用户的操作，如何创建和删除HTML元素，如何为元素添加事件等等。这个任务清单应用虽然很简单，但涉及的知识点非常基础且重要，完成后我对JavaScript有了更深的理解。
当然，这个项目还可以进一步优化，比如添加任务存储到本地存储、添加任务优先级、甚至做一个简洁的UI框架。不过，作为一个入门项目，它已经让我掌握了很多核心技能。
希望我的分享能帮助正在学习JavaScript的同学们，也许你们可以尝试做一些类似的项目，来巩固自己的学习成果。加油！
