# 使用JavaScript编写简单的待办事项应用

## 功能概述

这个待办事项应用将包含以下核心功能：

- 添加新的待办事项

- 标记事项为已完成

- 删除事项

- 本地存储数据

## HTML结构

```html

我的待办事项

<script src="app.js"></script>

```

## JavaScript实现

```javascript

// 待办事项数组

let todos = [];

// 页面加载时从本地存储加载数据

document.addEventListener('DOMContentLoaded', function() {

const savedTodos = localStorage.getItem('todos');

if (savedTodos) {

todos = JSON.parse(savedTodos);

renderTodos();

}

});

// 添加新待办事项

function addTodo() {

const input = document.getElementById('newTodo');

const text = input.value.trim();

if (text !== '') {

const newTodo = {

id: Date.now(),

text: text,

completed: false

};

todos.push(newTodo);

saveTodos();

renderTodos();

input.value = '';

}

}

// 渲染待办事项列表

function renderTodos() {

const todoList = document.getElementById('todoList');

todoList.innerHTML = '';

todos.forEach(todo => {

const li = document.createElement('li');

li.className = 'todo-item';

const span = document.createElement('span');

span.textContent = todo.text;

if (todo.completed) {

span.className = 'completed';

}

const completeButton = document.createElement('button');

completeButton.textContent = todo.completed ? '取消完成' : '完成';

completeButton.onclick = () => toggleComplete(todo.id);

const deleteButton = document.createElement('button');

deleteButton.textContent = '删除';

deleteButton.onclick = () => deleteTodo(todo.id);

li.appendChild(span);

li.appendChild(completeButton);

li.appendChild(deleteButton);

todoList.appendChild(li);

});

}

// 切换完成状态

function toggleComplete(id) {

todos = todos.map(todo => {

if (todo.id === id) {

return { ...todo, completed: !todo.completed };

}

return todo;

});

saveTodos();

renderTodos();

}

// 删除待办事项

function deleteTodo(id) {

todos = todos.filter(todo => todo.id !== id);

saveTodos();

renderTodos();

}

// 保存到本地存储

function saveTodos() {

localStorage.setItem('todos', JSON.stringify(todos));

}

// 支持按Enter键添加事项

document.getElementById('newTodo').addEventListener('keypress', function(e) {

if (e.key === 'Enter') {

addTodo();

}

});

```

## 功能说明

1. 数据结构：每个待办事项是一个对象，包含id、文本内容和完成状态

2. 本地存储：使用localStorage保存数据，刷新页面不会丢失

3. 用户交互：

- 输入框添加新事项

- 点击完成切换完成状态

- 点击删除移除事项

- 支持按Enter键快速添加

## 扩展建议

如需进一步改进，可以考虑：

- 添加事项分类功能

- 实现事项排序和筛选

- 添加截止日期提醒

- 优化移动端体验

这个简单的待办事项应用展示了如何使用JavaScript操作DOM、处理用户交互以及使用本地存储，是学习前端开发的良好起点。