首页 > 网络编程 > JavaScript > javascript技巧 > JS待办事项

使用JS实现一个功能丰富的待办事项应用

2024-01-23 09:55:09 作者：刻刻帝的海角

在日常工作和生活中,我们经常需要处理各种各样的待办事项,这篇文章主要为大家详细介绍了如何使用JavaScript实现一个功能丰富的待办事项应用,需要的可以了解下

引言

在日常工作和生活中，我们经常需要处理各种各样的待办事项。一个功能齐全、操作便捷的待办事项应用可以极大地提高我们的效率。今天，我们就来一起使用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待办事项内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！