在现代Web开发中，尽管框架如React、Vue层出不穷，掌握原生JavaScript依然是每个前端开发者的基本功。今天，我们就用纯JavaScript来打造一个实用的小项目——待办事项应用。它不仅能帮助我们管理日常任务，更是理解JavaScript核心概念的绝佳练习。

首先，我们需要搭建HTML结构。一个简洁的界面是良好用户体验的基础。我们只需要一个输入框用于添加新任务，一个按钮触发添加操作，以及一个无序列表来展示所有待办事项。

html

接下来是CSS部分，我们不追求复杂动效，而是注重清晰布局和基本样式。给容器居中显示，输入区域增加圆角和阴影，让整体看起来更现代一些。列表项之间留出适当间距，并为完成状态的任务添加删除线效果。

现在进入核心环节——JavaScript逻辑编写。我们的目标是实现四个基本功能：添加任务、删除任务、标记完成、数据持久化。

第一步，获取DOM元素：

javascript const taskInput = document.getElementById('taskInput'); const addBtn = document.getElementById('addBtn'); const taskList = document.getElementById('taskList');

然后定义一个初始化函数，用于从localStorage读取已保存的任务并渲染到页面上：

javascript function init() { const savedTasks = JSON.parse(localStorage.getItem('tasks')) || []; savedTasks.forEach(task => renderTask(task)); }

添加任务的功能需要绑定到按钮点击事件上：

javascript
addBtn.addEventListener('click', () => {
const text = taskInput.value.trim();
if (text === '') return alert('请输入任务内容！');

const newTask = {
id: Date.now(),
text: text,
completed: false
};

renderTask(newTask);
saveToStorage();
taskInput.value = '';
});

这里我们用时间戳作为唯一ID，避免重复。关键函数renderTask负责创建DOM节点：

javascript
function renderTask(task) {
const li = document.createElement('li');
li.dataset.id = task.id;
li.className = task.completed ? 'completed' : '';

li.innerHTML = <span>${task.text}</span> <div> <button class="complete-btn">✔</button> <button class="delete-btn">✖</button> </div>;

// 完成按钮事件
li.querySelector('.complete-btn').addEventListener('click', () => {
li.classList.toggle('completed');
saveToStorage();
});

// 删除按钮事件
li.querySelector('.delete-btn').addEventListener('click', () => {
li.remove();
saveToStorage();
});

taskList.appendChild(li);
}

每次状态变更后都调用saveToStorage函数，确保数据实时保存：

javascript function saveToStorage() { const tasks = []; document.querySelectorAll('#taskList li').forEach(item => { tasks.push({ id: item.dataset.id, text: item.querySelector('span').textContent, completed: item.classList.contains('completed') }); }); localStorage.setItem('tasks', JSON.stringify(tasks)); }

值得一提的是，我们没有使用任何第三方库或框架，完全依赖浏览器原生API完成所有交互。这种“返璞归真”的方式，反而能让我们更清楚地看到数据流是如何驱动UI变化的。

为了让体验更友好，还可以加入回车键提交功能：

javascript taskInput.addEventListener('keypress', e => { if (e.key === 'Enter') addBtn.click(); });

整个应用虽然代码不足百行，但已经具备了生产级应用的核心要素：用户输入、状态管理、事件响应、数据持久化。更重要的是，它展示了JavaScript如何通过操作DOM将静态页面变为动态交互系统。

这个小项目的意义不仅在于结果，更在于过程。每一步操作都在强化我们对事件循环、元素选择、属性操作的理解。当你亲手让一个按钮点击后生成新的列表项，并且刷新页面后依然存在时，那种掌控感正是编程的魅力所在。

未来你可以在此基础上扩展更多功能：任务分类、优先级设置、截止日期提醒，甚至同步到服务器。但无论功能如何演进，底层逻辑始终离不开今天我们所实践的这些基础技能。