在日常工作和生活中，我们经常需要处理各种各样的待办事项。一个功能齐全、操作便捷的待办事项应用可以极大地提高我们的效率。今天，我们就来一起使用JavaScript，从零开始，实现一个这样的应用。在这个过程中，我们将会学习到如何使用JavaScript操作DOM，如何实现本地存储，以及如何设计和实现一个具有复杂功能的前端应用。
我们的待办事项应用将具备以下功能：
首先，我们需要使用HTML来构建应用的基本结构。包括一个输入框用于输入新的待办事项，一个按钮用于添加待办事项，以及一个列表用于展示所有的待办事项。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>待办事项应用</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="container">
<h1>待办事项应用</h1>
<input type="text" id="newTodoInput" placeholder="输入新的待办事项">
<button id="addTodoButton">添加</button>
<ul id="todoList"></ul>
</div>
<script src="app.js"></script>
</body>
</html>?
?
然后，我们使用CSS来美化应用的用户界面。这里只展示部分关键样式，完整的样式可以根据你的喜好来设计。
.container {
max-width: 600px;
margin: 0 auto;
padding: 20px;
}
input[type="text"] {
width: 100%;
padding: 10px;
box-sizing: border-box;
margin-bottom: 20px;
}
button {
padding: 10px 20px;
background-color: #007BFF;
color: white;
border: none;
cursor: pointer;
margin-bottom: 20px;
}
li {
list-style: none;
padding: 10px;
background-color: #F8F9FA;
margin-bottom: 10px;
}
.completed {
text-decoration: line-through;
opacity: 0.6;
}?
最后，我们使用JavaScript来实现应用的各种功能。
// 获取DOM元素
const newTodoInput = document.getElementById('newTodoInput');
const addTodoButton = document.getElementById('addTodoButton');
const todoList = document.getElementById('todoList');
// 定义待办事项对象
class Todo {
constructor(text, priority, completed = false) {
this.text = text;
this.priority = priority;
this.completed = completed;
}
}
// 添加待办事项
addTodoButton.addEventListener('click', () => {
const text = newTodoInput.value.trim();
if (text) {
// 假设优先级默认为中
const todo = new Todo(text, '中');
addTodoToList(todo);
saveTodosToLocalStorage();
newTodoInput.value = '';
}
});
// 将待办事项添加到列表中
function addTodoToList(todo) {
const listItem = document.createElement('li');
listItem.textContent = `${todo.text} [${todo.priority}]`;
listItem.classList.add('todo-item');
// 添加完成按钮
const completeButton = document.createElement('button');
completeButton.textContent = '完成';
completeButton.addEventListener('click', () => {
todo.completed = true;
listItem.classList.add('completed');
saveTodosToLocalStorage();
});
listItem.appendChild(completeButton);
// 添加删除按钮
const deleteButton = document.createElement('button');
deleteButton.textContent = '删除';
deleteButton.addEventListener('click', () => {
todoList.removeChild(listItem);
removeTodoFromLocalStorage(todo);
});
listItem.appendChild(deleteButton);
todoList.appendChild(listItem);
}
// 从本地存储中加载待办事项
function loadTodosFromLocalStorage() {
const savedTodos = JSON.parse(localStorage.getItem('todos'));
if (savedTodos) {
savedTodos.forEach(todoData => {
const todo = new Todo(todoData.text, todoData.priority, todoData.completed);
addTodoToList(todo);
});
}
}
// 将待办事项保存到本地存储
function saveTodosToLocalStorage() {
const todosData = Array.from(todoList.children).map(listItem => {
const todoText = listItem.textContent.split('[')[0].trim();
const todoPriority = listItem.textContent.split('[')[1].split(']')[0];
const todoCompleted = listItem.classList.contains('completed');
return { text: todoText, priority: todoPriority, completed: todoCompleted };
});
localStorage.setItem('todos', JSON.stringify(todosData));
}
// 从本地存储中删除待办事项
function removeTodoFromLocalStorage(todo) {
const todosData = JSON.parse(localStorage.getItem('todos'));
const updatedTodosData = todosData.filter(todoData => todoData.text !== todo.text);
localStorage.setItem('todos', JSON.stringify(updatedTodosData));
// 这里需要重新加载列表，以确保界面和数据同步
todoList.innerHTML = '';
loadTodosFromLocalStorage();
}
// 初始化应用
loadTodosFromLocalStorage();Todo类，用于表示待办事项。每个待办事项都有一个文本内容、一个优先级和一个表示是否已完成的标志。Todo对象，并将其添加到列表中。同时，我们还会将待办事项保存到本地存储中。addTodoToList函数中，我们创建了一个新的列表项，并将其添加到待办事项列表中。同时，我们还为每个列表项添加了一个完成按钮和一个删除按钮。loadTodosFromLocalStorage函数用于从本地存储中加载待办事项，saveTodosToLocalStorage函数用于将待办事项保存到本地存储，removeTodoFromLocalStorage函数用于从本地存储中删除待办事项。loadTodosFromLocalStorage函数，以确保用户的待办事项能够从本地存储中加载到界面中。通过以上的步骤，我们成功地使用JavaScript实现了一个功能丰富的待办事项应用。在这个过程中，我们不仅学习了如何使用JavaScript操作DOM，还学习了如何实现本地存储，以及如何设计和实现一个具有复杂功能的前端应用。希望这个例子能够帮助你更好地理解JavaScript的实际应用，并激发你对前端开发的热情。
?