万能工具大全——待办事项应用

红目香薰

发布于 2025-12-16 15:13:15

2260

前言

我们可以通过算法来完成很多很多的功能，所以就有了一个想法，将各类工具都写出来，当然是尽可能的，毕竟未来无限可期，很多功能是我们当前还想不到的，为了最为靠谱的方法来完成，这里选择的语言为 HTML 来完成，别看只是简单的页面操作，但是里面都是各类算法来完成的，并且有很多的js库，做起来会很方便，能节约很多的时间，本系列文章会很多，有些标题命名可能不太合适，如果你用到了，感觉不好找可以在文章下面留言，我看到了后会进行对应的修改，希望本系列文章能给大家提供到各种各样的遍历。

功能说明

基本功能添加任务：用户可以输入任务内容，设置优先级和截止日期，然后点击"添加"按钮或按回车键添加新任务。查看任务：所有添加的任务会显示在任务列表中，包括任务内容、优先级标记和截止日期。完成任务：点击任务前的圆形复选框可以标记任务为已完成状态，已完成的任务会有删除线标记。删除任务：点击任务右侧的垃圾桶图标可以删除该任务。清除已完成任务：点击底部的"清除已完成"按钮可以一次性删除所有已完成的任务。高级功能任务优先级：

高优先级：红色标记中优先级：橙色标记低优先级：绿色标记任务过滤：

全部：显示所有任务未完成：只显示未完成的任务已完成：只显示已完成的任务任务排序：

按优先级排序：高优先级任务排在前面按截止日期排序：截止日期近的任务排在前面按添加时间排序：最近添加的任务排在前面截止日期显示：

今天到期的显示为"今天" 明天到期的显示为"明天" 其他日期显示为"月份+日期" 已过期的任务日期会以红色显示并带有警告图标数据持久化：

使用浏览器的localStorage保存任务数据，关闭页面后再次打开仍能看到之前的任务任务统计：

底部显示当前未完成任务的数量响应式设计：

适配不同屏幕尺寸，在手机等小屏设备上也能良好显示这个应用采用了现代化的界面设计，操作简单直观，可以帮助用户有效地管理和跟踪日常任务。

核心代码

以HTML代码为主，只有index.html

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>待办事项应用</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css">
    <style>
:root {
    --primary-color: #ff7a7a;
    --secondary-color: #ffb6b6;
    --bg-color: #fff9f9;
    --text-color: #333;
    --border-color: #f0e0e0;
    --shadow-color: rgba(255, 122, 122, 0.1);
    --completed-color: #a8a8a8;
    --high-priority: #ff7a7a;
    --medium-priority: #ffb347;
    --low-priority: #90ee90;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'PingFang SC', 'Microsoft YaHei', sans-serif;
}

body {
    background-color: var(--bg-color);
    color: var(--text-color);
    line-height: 1.6;
}

.container {
    max-width: 800px;
    margin: 0 auto;
    padding: 20px;
}

header {
    margin-bottom: 30px;
}

.profile {
    display: flex;
    align-items: center;
    gap: 15px;
}

.avatar img {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    object-fit: cover;
    border: 3px solid var(--primary-color);
}

.info h3 {
    font-size: 1.2rem;
    margin-bottom: 5px;
}

.info p {
    font-size: 0.9rem;
    color: #666;
}

.blog-post {
    background-color: white;
    border-radius: 15px;
    padding: 30px;
    box-shadow: 0 5px 15px var(--shadow-color);
    margin-bottom: 30px;
}

.blog-post h1 {
    font-size: 1.8rem;
    margin-bottom: 15px;
    color: var(--primary-color);
}

.post-meta {
    display: flex;
    gap: 15px;
    font-size: 0.85rem;
    color: #888;
    margin-bottom: 25px;
    flex-wrap: wrap;
}

.post-meta span {
    display: flex;
    align-items: center;
    gap: 5px;
}

.post-content h2 {
    font-size: 1.5rem;
    margin: 30px 0 15px;
    padding-bottom: 10px;
    border-bottom: 2px solid var(--secondary-color);
    color: var(--primary-color);
}

.post-content p, .post-content ul, .post-content ol {
    margin-bottom: 20px;
}

.post-content ul, .post-content ol {
    padding-left: 20px;
}

.post-content li {
    margin-bottom: 10px;
}

.tool-demo {
    background-color: #fafafa;
    border-radius: 10px;
    padding: 20px;
    margin: 30px 0;
    border: 1px solid var(--border-color);
}

.tool-demo h3 {
    text-align: center;
    margin-bottom: 20px;
    color: var(--primary-color);
}

.todo-app {
    background-color: white;
    border-radius: 10px;
    box-shadow: 0 3px 10px var(--shadow-color);
    overflow: hidden;
}

.todo-header {
    background-color: var(--primary-color);
    color: white;
    padding: 15px 20px;
}

.todo-header h2 {
    font-size: 1.3rem;
    margin-bottom: 15px;
    display: flex;
    align-items: center;
    gap: 10px;
}

.todo-form {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.todo-form input[type="text"] {
    padding: 10px 15px;
    border: none;
    border-radius: 5px;
    font-size: 1rem;
    width: 100%;
}

.task-details {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}

.task-details select, .task-details input[type="date"] {
    padding: 8px;
    border: none;
    border-radius: 5px;
    flex: 1;
    min-width: 100px;
}

#addTaskBtn {
    background-color: white;
    color: var(--primary-color);
    border: none;
    border-radius: 5px;
    padding: 8px 15px;
    cursor: pointer;
    font-weight: bold;
    display: flex;
    align-items: center;
    gap: 5px;
    transition: all 0.3s;
}

#addTaskBtn:hover {
    background-color: #f0f0f0;
}

.filter-options {
    display: flex;
    justify-content: space-between;
    padding: 15px 20px;
    background-color: #f9f9f9;
    border-bottom: 1px solid var(--border-color);
    flex-wrap: wrap;
    gap: 10px;
}

.filter-btn {
    background: none;
    border: none;
    padding: 5px 10px;
    cursor: pointer;
    border-radius: 15px;
    transition: all 0.3s;
}

.filter-btn.active {
    background-color: var(--primary-color);
    color: white;
}

.sort-options {
    display: flex;
    align-items: center;
    gap: 10px;
}

.sort-options select {
    padding: 5px;
    border: 1px solid var(--border-color);
    border-radius: 5px;
}

.todo-list {
    list-style: none;
    max-height: 300px;
    overflow-y: auto;
}

.todo-list li {
    padding: 15px 20px;
    border-bottom: 1px solid var(--border-color);
    display: flex;
    justify-content: space-between;
    align-items: center;
    transition: all 0.3s;
}

.todo-list li:hover {
    background-color: #f9f9f9;
}

.task-content {
    display: flex;
    align-items: center;
    gap: 10px;
    flex: 1;
}

.task-checkbox {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    border: 2px solid var(--primary-color);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

.task-checkbox.completed {
    background-color: var(--primary-color);
    color: white;
}

.task-text {
    flex: 1;
}

.task-text.completed {
    text-decoration: line-through;
    color: var(--completed-color);
}

.task-priority {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    margin-right: 10px;
}

.priority-3 {
    background-color: var(--high-priority);
}

.priority-2 {
    background-color: var(--medium-priority);
}

.priority-1 {
    background-color: var(--low-priority);
}

.task-date {
    font-size: 0.8rem;
    color: #888;
}

.task-actions {
    display: flex;
    gap: 10px;
}

.task-actions button {
    background: none;
    border: none;
    cursor: pointer;
    color: #888;
    transition: all 0.3s;
}

.task-actions button:hover {
    color: var(--primary-color);
}

.todo-stats {
    display: flex;
    justify-content: space-between;
    padding: 15px 20px;
    background-color: #f9f9f9;
    color: #888;
    font-size: 0.9rem;
}

#clearCompletedBtn {
    background: none;
    border: none;
    color: var(--primary-color);
    cursor: pointer;
}

.code-section {
    background-color: #f8f8f8;
    border-radius: 10px;
    padding: 20px;
    margin: 20px 0;
    border: 1px solid #eee;
}

.code-section h3 {
    margin-top: 20px;
    margin-bottom: 10px;
    color: var(--primary-color);
}

.post-footer {
    margin-top: 40px;
    border-top: 1px solid var(--border-color);
    padding-top: 20px;
}

.tags {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 20px;
}

.tag {
    background-color: var(--secondary-color);
    color: white;
    padding: 5px 10px;
    border-radius: 15px;
    font-size: 0.8rem;
}

.social-share {
    display: flex;
    gap: 15px;
}

.social-share button {
    background: none;
    border: 1px solid var(--border-color);
    padding: 8px 15px;
    border-radius: 20px;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 5px;
    transition: all 0.3s;
}

.social-share button:hover {
    background-color: var(--primary-color);
    color: white;
    border-color: var(--primary-color);
}

footer {
    text-align: center;
    padding: 20px 0;
    color: #888;
    font-size: 0.9rem;
}

@media (max-width: 600px) {
    .container {
        padding: 10px;
    }
    
    .blog-post {
        padding: 20px;
    }
    
    .post-meta {
        flex-direction: column;
        gap: 5px;
    }
    
    .task-details {
        flex-direction: column;
    }
    
    .filter-options {
        flex-direction: column;
        align-items: flex-start;
    }
    
    .social-share {
        flex-wrap: wrap;
    }
}
    </style>
</head>
<body>
    <div class="container">
        <div class="blog-post">
            <h1>待办事项应用</h1>
            
            <div class="tool-demo">
                <h3>我的待办事项</h3>
                <div class="todo-app">
                    <div class="todo-header">
                        <h2><i class="fas fa-tasks"></i> 待办事项</h2>
                        <div class="todo-form">
                            <input type="text" id="taskInput" placeholder="添加新任务...">
                            <div class="task-details">
                                <select id="prioritySelect">
                                    <option value="3">高优先级</option>
                                    <option value="2" selected>中优先级</option>
                                    <option value="1">低优先级</option>
                                </select>
                                <input type="date" id="dueDateInput">
                                <button id="addTaskBtn"><i class="fas fa-plus"></i> 添加</button>
                            </div>
                        </div>
                    </div>
                    
                    <div class="filter-options">
                        <div class="filter-buttons">
                            <button class="filter-btn active" data-filter="all">全部</button>
                            <button class="filter-btn" data-filter="active">未完成</button>
                            <button class="filter-btn" data-filter="completed">已完成</button>
                        </div>
                        <div class="sort-options">
                            <span>排序:</span>
                            <select id="sortSelect">
                                <option value="priority">优先级</option>
                                <option value="date">截止日期</option>
                                <option value="added">添加时间</option>
                            </select>
                        </div>
                    </div>
                    
                    <ul id="taskList" class="todo-list">
                        <!-- 任务将通过JavaScript动态添加 -->
                    </ul>
                    
                    <div class="todo-stats">
                        <span id="taskCount">0 个待办任务</span>
                        <button id="clearCompletedBtn">清除已完成</button>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <script>
document.addEventListener('DOMContentLoaded', function() {
    // DOM元素
    const taskInput = document.getElementById('taskInput');
    const prioritySelect = document.getElementById('prioritySelect');
    const dueDateInput = document.getElementById('dueDateInput');
    const addTaskBtn = document.getElementById('addTaskBtn');
    const taskList = document.getElementById('taskList');
    const taskCount = document.getElementById('taskCount');
    const clearCompletedBtn = document.getElementById('clearCompletedBtn');
    const filterBtns = document.querySelectorAll('.filter-btn');
    const sortSelect = document.getElementById('sortSelect');
    
    // 设置今天的日期为默认日期
    const today = new Date();
    const formattedDate = today.toISOString().split('T')[0];
    dueDateInput.value = formattedDate;
    
    // 任务数组
    let tasks = JSON.parse(localStorage.getItem('tasks')) || [];
    
    // 当前过滤器
    let currentFilter = 'all';
    
    // 初始化
    renderTasks();
    updateTaskCount();
    
    // 添加任务
    addTaskBtn.addEventListener('click', addTask);
    taskInput.addEventListener('keypress', function(e) {
        if (e.key === 'Enter') {
            addTask();
        }
    });
    
    // 清除已完成任务
    clearCompletedBtn.addEventListener('click', clearCompleted);
    
    // 过滤器点击事件
    filterBtns.forEach(btn => {
        btn.addEventListener('click', function() {
            filterBtns.forEach(b => b.classList.remove('active'));
            this.classList.add('active');
            currentFilter = this.dataset.filter;
            renderTasks();
        });
    });
    
    // 排序选择事件
    sortSelect.addEventListener('change', renderTasks);
    
    // 添加任务函数
    function addTask() {
        const text = taskInput.value.trim();
        if (text) {
            const priority = parseInt(prioritySelect.value);
            const dueDate = dueDateInput.value || formattedDate;
            
            const task = {
                id: Date.now(),
                text,
                priority,
                dueDate,
                completed: false,
                createdAt: Date.now()
            };
            
            tasks.push(task);
            saveTasks();
            renderTasks();
            updateTaskCount();
            
            // 清空输入
            taskInput.value = '';
            prioritySelect.value = '2';
            dueDateInput.value = formattedDate;
            taskInput.focus();
        }
    }
    
    // 渲染任务列表
    function renderTasks() {
        // 过滤任务
        let filteredTasks = tasks;
        if (currentFilter === 'active') {
            filteredTasks = tasks.filter(task => !task.completed);
        } else if (currentFilter === 'completed') {
            filteredTasks = tasks.filter(task => task.completed);
        }
        
        // 排序任务
        const sortBy = sortSelect.value;
        filteredTasks = sortTasks(filteredTasks, sortBy);
        
        // 清空列表
        taskList.innerHTML = '';
        
        // 添加任务到列表
        filteredTasks.forEach(task => {
            const li = document.createElement('li');
            
            // 任务内容
            const taskContent = document.createElement('div');
            taskContent.className = 'task-content';
            
            // 复选框
            const checkbox = document.createElement('div');
            checkbox.className = `task-checkbox ${task.completed ? 'completed' : ''}`;
            checkbox.innerHTML = task.completed ? '<i class="fas fa-check"></i>' : '';
            checkbox.addEventListener('click', () => toggleTask(task.id));
            
            // 优先级标记
            const priorityMark = document.createElement('div');
            priorityMark.className = `task-priority priority-${task.priority}`;
            
            // 任务文本
            const taskText = document.createElement('div');
            taskText.className = `task-text ${task.completed ? 'completed' : ''}`;
            taskText.textContent = task.text;
            
            // 截止日期
            const taskDate = document.createElement('div');
            taskDate.className = 'task-date';
            const dueDate = new Date(task.dueDate);
            const now = new Date();
            const isOverdue = !task.completed && dueDate < now && dueDate.toDateString() !== now.toDateString();
            
            taskDate.textContent = formatDate(task.dueDate);
            if (isOverdue) {
                taskDate.style.color = 'red';
                taskDate.innerHTML += ' <i class="fas fa-exclamation-circle"></i>';
            }
            
            // 组装任务内容
            taskContent.appendChild(checkbox);
            taskContent.appendChild(priorityMark);
            taskContent.appendChild(taskText);
            taskContent.appendChild(taskDate);
            
            // 任务操作
            const taskActions = document.createElement('div');
            taskActions.className = 'task-actions';
            
            // 删除按钮
            const deleteBtn = document.createElement('button');
            deleteBtn.innerHTML = '<i class="fas fa-trash"></i>';
            deleteBtn.addEventListener('click', () => deleteTask(task.id));
            
            // 组装任务操作
            taskActions.appendChild(deleteBtn);
            
            // 组装任务项
            li.appendChild(taskContent);
            li.appendChild(taskActions);
            
            taskList.appendChild(li);
        });
    }
    
    // 切换任务完成状态
    function toggleTask(id) {
        tasks = tasks.map(task => {
            if (task.id === id) {
                return { ...task, completed: !task.completed };
            }
            return task;
        });
        
        saveTasks();
        renderTasks();
        updateTaskCount();
    }
    
    // 删除任务
    function deleteTask(id) {
        tasks = tasks.filter(task => task.id !== id);
        saveTasks();
        renderTasks();
        updateTaskCount();
    }
    
    // 清除已完成任务
    function clearCompleted() {
        tasks = tasks.filter(task => !task.completed);
        saveTasks();
        renderTasks();
        updateTaskCount();
    }
    
    // 更新任务计数
    function updateTaskCount() {
        const activeCount = tasks.filter(task => !task.completed).length;
        taskCount.textContent = `${activeCount} 个待办任务`;
    }
    
    // 保存任务到本地存储
    function saveTasks() {
        localStorage.setItem('tasks', JSON.stringify(tasks));
    }
    
    // 排序任务
    function sortTasks(tasks, sortBy) {
        return [...tasks].sort((a, b) => {
            if (sortBy === 'priority') {
                // 按优先级排序（高到低）
                return b.priority - a.priority;
            } else if (sortBy === 'date') {
                // 按截止日期排序（近到远）
                return new Date(a.dueDate) - new Date(b.dueDate);
            } else {
                // 按添加时间排序（新到旧）
                return b.createdAt - a.createdAt;
            }
        });
    }
    
    // 格式化日期
    function formatDate(dateString) {
        const date = new Date(dateString);
        const today = new Date();
        const tomorrow = new Date(today);
        tomorrow.setDate(tomorrow.getDate() + 1);
        
        if (date.toDateString() === today.toDateString()) {
            return '今天';
        } else if (date.toDateString() === tomorrow.toDateString()) {
            return '明天';
        } else {
            return `${date.getMonth() + 1}月${date.getDate()}日`;
        }
    }
});
    </script>
</body>
</html>