当前位置：首页 > news >正文

JavaScript实战：制作一个待办事项列表应用

news 2026/5/22 18:25:56

JavaScript实战：制作一个待办事项列表应用

引言

在本教程中，我们将一步步创建一个简单的待办事项列表应用，这不仅会帮助你学习基本的JavaScript编程概念，还会教会你如何处理事件以及操作DOM。这个项目是面向初学者的，旨在提供实际操作的经验。
在这里插入图片描述

知识准备

HTML基础：了解如何编写基础的HTML结构。
CSS基础：理解如何使用CSS进行样式设置。
JavaScript基础：熟悉变量、函数、数组和对象的概念。

第一步：创建应用的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><!-- 可以在这里添加CSS或链接外部样式表 -->
</head>
<body><div id="app"><h1>我的待办事项</h1><form id="todo-form"><input type="text" id="todo-input" placeholder="添加新的待办事项..."><button type="submit">添加</button></form><ul id="todo-list"><!-- 待办事项将在这里动态插入 --></ul></div><!-- 在此处链接外部JavaScript文件 -->
</body>
</html>

第二步：添加样式

我们的应用可能会很基础，但添加一些简单的样式可以让它看起来更好。

/* 在此添加基础样式 */
body {font-family: 'Arial', sans-serif;background: #f4f4f4;color: #333;line-height: 1.6;
}#app {width: 300px;margin: 30px auto;
}#todo-form input[type="text"] {width: 70%;padding: 10px;
}#todo-form button {width: 25%;background: #333;color: white;padding: 10px;border: none;
}#todo-list {list-style: none;padding: 0;
}#todo-list li {background: #fff;margin-bottom: 5px;padding: 10px;text-align: left;
}

第三步：编写JavaScript逻辑

现在，我们将使用JavaScript为我们的应用添加交互性。

3.1 获取元素引用

// 获取DOM元素的引用
const todoForm = document.getElementById('todo-form');
const todoInput = document.getElementById('todo-input');
const todoList = document.getElementById('todo-list');

3.2 添加事件监听器

// 处理表单提交事件
todoForm.addEventListener('submit', function(event) {event.preventDefault(); // 阻止表单默认提交行为// 获取用户输入的待办事项const newTodoText = todoInput.value.trim();// 检查输入不为空if (newTodoText !== '') {addTodoItem(newTodoText);todoInput.value = ''; // 清空输入框}
});

3.3 添加新的待办事项

function addTodoItem(text) {// 创建新的li元素const li = document.createElement('li');li.textContent = text;// 添加删除按钮const deleteBtn = document.createElement('button');deleteBtn.textContent = '删除';deleteBtn.onclick = function() {li.remove();};li.appendChild(deleteBtn);// 将新的待办事项添加到列表中todoList.appendChild(li);
}

第四步：本地存储和加载待办事项

为了保证用户在关闭浏览器后再次访问应用时能够看到之前的待办事项，我们可以使用浏览器的LocalStorage功能。

4.1 在添加新待办事项时存储数据

function addTodoItem(text) {// ...之前的代码// 存储待办事项到LocalStoragesaveTodos();
}

4.2 存储和加载函数

function saveTodos() {const todos = [];document.querySelectorAll('#todo-list li').forEach(function(item) {todos.push(item.textContent.replace('删除', '').trim());});localStorage.setItem('todos', JSON.stringify(todos));
}function loadTodos() {const todos = JSON.parse(localStorage.getItem('todos')) || [];todos.forEach(addTodoItem);
}// 页面加载时调用loadTodos
document.addEventListener('DOMContentLoaded', loadTodos);

以上是文章的大纲和部分内容，整篇文章可以根据这个基础继续扩展，深入解释每个概念，添加代码注释，增加更多的功能，如编辑待办事项、排序或筛选功能。您可以通过增加更多的例子，提示，最佳实践和相关资源，来帮助读者更好地理解并实践。不要忘了在文章的末尾添加总结部分，回顾已经学到的知识，并鼓励读者继续学习和探索JavaScript的更多功能。

JavaScript实战：制作一个待办事项列表应用

引言

知识准备

第一步：创建应用的HTML结构

第二步：添加样式

第三步：编写JavaScript逻辑

3.1 获取元素引用

3.2 添加事件监听器

3.3 添加新的待办事项

第四步：本地存储和加载待办事项

4.1 在添加新待办事项时存储数据

4.2 存储和加载函数

相关文章：