使用JS实现一个功能丰富的待办事项应用
引言
在日常工作和生活中，我们经常需要处理各种各样的待办事项。一个功能齐全、操作便捷的待办事项应用可以极大地提高我们的效率。今天，我们就来一起使用JavaScript，从零开始，实现一个这样的应用。在这个过程中，我们将会学习到如何使用JavaScript操作DOM，如何实现本地存储，以及如何设计和实现一个具有复杂功能的前端应用。
功能需求
我们的待办事项应用将具备以下功能：
用户可以输入新的待办事项，并添加到列表中。
用户可以为每个待办事项设置优先级（高、中、低）。
用户可以标记待办事项为已完成或未完成。
用户可以删除待办事项。
应用能够持久化存储用户的待办事项，即使刷新页面也不会丢失数据。
技术栈
HTML：用于构建应用的用户界面。
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>
<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样式
然后，我们使用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实现
最后，我们使用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，还学习了如何实现本地存储，以及如何设计和实现一个具有复杂功能的前端应用。
到此这篇关于使用JS实现一个功能丰富的待办事项应用的文章就介绍到这了,更多相关JS待办事项内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！
相关文章
本文介绍了“node在两个div之间移动,用ztree实现”的方法，需要的朋友可以参考一下2013-03-03
这篇文章主要为大家详细介绍了微信小程序地图实现展示线路，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2020-06-06
layui将table转化表单显示的方法(即table.render转为表单展示)
今天小编就为大家分享一篇layui将table转化表单显示的方法(即table.render转为表单展示)，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2019-09-09
这篇文章主要为大家分享了一些精彩的JavaScript代码片段，大家喜欢的收藏一下2017-01-01
wx:for是微信小程序中的一个列表渲染指令,用于循环渲染一个数组或对象中的数据,它类似于JavaScript中的for循环,可以根据数据的长度自动渲染相应的列表项,本文给大家介绍微信小程序wx:for 的使用及wx:key绑定两种方式,感兴趣的朋友一起看看吧2023-12-12
JavaScript调试之console.log调试的一个小技巧分享
日常开发中经常会需要console来查看当前对象的值。当然用debugger会更全面的查看，但是总有只喜欢用console的，比如我。下面这篇文章主要给大家分享了关于JavaScript调试之console.log调试的一个小技巧，需要的朋友可以参考借鉴，下面来一起看看吧。2017-08-08
这篇文章主要介绍了如何基于javascript实现贪吃蛇游戏,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下2020-02-02
这篇文章主要介绍了详解微信小程序支付流程与梳理，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2019-07-07
三剑客：offset、client和scroll还傻傻分不清？
这篇文章主要给大家介绍了三剑客：offset，client和scroll的相关资料，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2020-12-12
这篇文章主要介绍了基于rollup的组件库打包体积优化小结，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-06-06
最新评论