基础HTML结构搭建
首先我们需要准备一个简单的页面结构，包含输入框、添加按钮和展示待办事项的容器，后续会通过JavaScript类来操作这些元素。
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>待办事项列表</title>
<style>
.todo-container {
width: 500px;
margin: 50px auto;
font-family: Arial, sans-serif;
}
.todo-input {
display: flex;
margin-bottom: 20px;
}
.todo-input input {
flex: 1;
padding: 8px;
font-size: 16px;
}
.todo-input button {
padding: 8px 16px;
background-color: #409eff;
color: white;
border: none;
cursor: pointer;
}
.todo-list {
list-style: none;
padding: 0;
}
.todo-item {
display: flex;
justify-content: space-between;
align-items: center;
padding: 10px;
border-bottom: 1px solid #eee;
}
.todo-item.completed span {
text-decoration: line-through;
color: #999;
}
.todo-item button {
margin-left: 10px;
padding: 4px 8px;
cursor: pointer;
}
</style>
</head>
<body>
<div class="todo-container">
<div class="todo-input">
<input type="text" id="todoInput" placeholder="请输入待办事项">
<button id="addBtn">添加</button>
</div>
<ul class="todo-list" id="todoList"></ul>
</div>
<script src="todo.js"></script>
</body>
</html>
定义待办事项类
接下来我们创建TodoList类，封装待办事项的所有核心逻辑，包括数据存储、增删改查以及视图更新方法。
class TodoList {
constructor() {
// 存储所有待办事项的数组，每个事项是包含id、内容和完成状态的对象
this.todos = [];
// 自增id，用于给每个待办事项生成唯一标识
this.id = 0;
// 获取页面上的DOM元素
this.input = document.getElementById('todoInput');
this.addBtn = document.getElementById('addBtn');
this.listContainer = document.getElementById('todoList');
// 初始化事件绑定
this.initEvent();
}
// 初始化事件监听
initEvent() {
// 点击添加按钮时触发添加待办事项逻辑
this.addBtn.addEventListener('click', () => {
this.addTodo();
});
// 输入框按回车键也可以添加待办事项
this.input.addEventListener('keydown', (e) => {
if (e.key === 'Enter') {
this.addTodo();
}
});
}
// 添加待办事项
addTodo() {
const content = this.input.value.trim();
// 内容为空时不添加
if (!content) {
alert('请输入待办事项内容');
return;
}
// 创建新的待办事项对象
const newTodo = {
id: this.id++,
content: content,
completed: false
};
// 存入数组
this.todos.push(newTodo);
// 清空输入框
this.input.value = '';
// 更新视图
this.render();
}
// 删除待办事项
deleteTodo(id) {
// 过滤掉要删除的事项
this.todos = this.todos.filter(todo => todo.id !== id);
// 更新视图
this.render();
}
// 切换待办事项的完成状态
toggleComplete(id) {
this.todos = this.todos.map(todo => {
if (todo.id === id) {
// 切换完成状态
return { ...todo, completed: !todo.completed };
}
return todo;
});
// 更新视图
this.render();
}
// 渲染待办事项列表到页面
render() {
// 清空现有列表
this.listContainer.innerHTML = '';
// 遍历所有待办事项生成DOM元素
this.todos.forEach(todo => {
const li = document.createElement('li');
li.className = `todo-item ${todo.completed ? 'completed' : ''}`;
li.innerHTML = `
<span>${todo.content}</span>
<div>
<button class="complete-btn">${todo.completed ? '标记未完成' : '标记完成'}</button>
<button class="delete-btn">删除</button>
</div>
`;
// 给标记完成按钮绑定事件
li.querySelector('.complete-btn').addEventListener('click', () => {
this.toggleComplete(todo.id);
});
// 给删除按钮绑定事件
li.querySelector('.delete-btn').addEventListener('click', () => {
this.deleteTodo(todo.id);
});
// 将li添加到列表容器
this.listContainer.appendChild(li);
});
}
}
实例化类并启动功能
最后我们只需要在页面加载完成后，实例化TodoList类，就可以启动整个待办事项列表的功能了。
// 等待DOM加载完成后实例化类
document.addEventListener('DOMContentLoaded', () => {
new TodoList();
});
功能扩展思路
上述实现的是基础的待办事项功能，你还可以基于这个类做更多扩展：
- 添加本地存储功能，使用
localStorage保存待办事项数据，页面刷新后数据不丢失 - 增加编辑待办事项内容的功能，点击内容可以进入编辑模式
- 添加筛选功能，比如筛选全部、已完成、未完成的事项
- 优化样式，让列表的视觉效果更美观
使用类来构建这类功能，最大的好处是逻辑封装清晰，后续如果要修改或者扩展功能，只需要在类的内部调整对应方法即可，不会影响到其他部分的代码，也方便后续复用。
JavaScript待办事项列表类前端交互数组方法修改时间：2026-07-14 21:09:32