答案：该待办事项应用通过HTML、CSS和JavaScript实现任务的添加、删除和标记完成功能，支持回车添加、点击切换状态和删除操作，并可通过localStorage实现数据持久化。
实现一个简单的待办事项应用是学习JavaScript的绝佳方式。它能帮助你掌握DOM操作、事件处理和基础的数据管理。下面是一个完整的、可运行的待办事项应用示例，包含添加、删除和标记完成任务的功能。
1. 页面结构（HTML）
首先创建一个基本的HTML页面，包含输入框、添加按钮和待办事项列表：
简单待办事项应用 待办事项
2. 样式设计（CSS）
为应用添加一些基础样式，使其更美观：
.container {
max-width: 500px;
margin: 50px auto;
padding: 20px;
font-family: Arial, sans-serif;
}
h1 {
text-align: center;
}
#taskInput {
width: 70%;
padding: 10px;
font-size: 16px;
border: 1px solid #ccc;
border-radius: 4px;
}
#addBtn {
padding: 10px 15px;
font-size: 16px;
background-color: #007bff;
color: white;
border: none;
border-radius: 4px;
cursor: pointer;
}
#addBtn:hover {
background-color: #0056b3;
}
ul {
list-style-type: none;
padding: 0;
margin-top: 20px;
}
li {
padding: 10px;
border-bottom: 1px solid #eee;
display: flex;
justify-content: space-between;
align-items: center;
}
li.completed {
text-decoration: line-through;
color: #888;
}
.delete-btn {
color: red;
cursor: pointer;
}
3. 核心功能（JavaScript）
在script.js中编写逻辑代码，实现添加、删除和切换任务状态的功能：
// 获取DOM元素
const taskInput = document.getElementById('taskInput');
const addBtn = document.getElementById('addBtn');
const taskList = document.getElementById('taskList');
// 存储任务的数组
let tasks = [];
// 添加任务函数
function addTask() {
const taskText = taskInput.value.trim();
if (taskText === '') return;
// 创建任务对象
const newTask = {
id: Date.now(),
text: taskText,
completed: false
};
// 添加到数组
tasks.push(newTask);
// 清空输入框
taskInput.value = '';
// 更新界面
renderTasks();
}
// 渲染任务列表
function renderTasks() {
taskList.innerHTML = '';
tasks.forEach(task => {
const li = document.createElement('li');
if (task.completed) {
li.classList.add('completed');
}
// 显示任务文本
const span = document.createElement('span');
span.textContent = task.text;
span.addEventListener('click', () => toggleTask(task.id));
li.appendChild(span);
//
删除按钮
const deleteBtn = document.createElement('span');
deleteBtn.textContent = '✖';
deleteBtn.className = 'delete-btn';
deleteBtn.addEventListener('click', () => deleteTask(task.id));
li.appendChild(deleteBtn);
taskList.appendChild(li);
});
}
// 切换任务完成状态
function toggleTask(id) {
tasks = tasks.map(task =>
task.id === id ? { ...task, completed: !task.completed } : task
);
renderTasks();
}
// 删除任务
function deleteTask(id) {
tasks = tasks.filter(task => task.id !== id);
renderTasks();
}
// 事件监听
addBtn.addEventListener('click', addTask);
taskInput.addEventListener('keypress', e => {
if (e.key === 'Enter') {
addTask();
}
});
删除按钮
const deleteBtn = document.createElement('span');
deleteBtn.textContent = '✖';
deleteBtn.className = 'delete-btn';
deleteBtn.addEventListener('click', () => deleteTask(task.id));
li.appendChild(deleteBtn);
taskList.appendChild(li);
});
}
// 切换任务完成状态
function toggleTask(id) {
tasks = tasks.map(task =>
task.id === id ? { ...task, completed: !task.completed } : task
);
renderTasks();
}
// 删除任务
function deleteTask(id) {
tasks = tasks.filter(task => task.id !== id);
renderTasks();
}
// 事件监听
addBtn.addEventListener('click', addTask);
taskInput.addEventListener('keypress', e => {
if (e.key === 'Enter') {
addTask();
}
});
4. 功能说明
这个待办事项应用具备以下特性：
- 添加任务：输入内容后点击“添加”或按回车键即可新增任务
- 标记完成：点击任务文字可切换完成状态，已完成任务会显示删除线
- 删除任务：点击右侧的“✖”按钮可删除对应任务
-
数据持久化（进阶）：可通过
localStorage保存任务，刷新页面不丢失
如果需要持久化存储，可在addTask、toggleTask和deleteTask末尾添加：
localStorage.setItem('tasks', JSON.stringify(tasks));
并在页面加载时读取：
if (localStorage.getItem('tasks')) {
tasks = JSON.parse(localStorage.getItem('tasks'));
renderTasks();
}
基本上就这些。这是一个简洁实用的JavaScript待办事项应用，适合初学者理解和扩展。
