备忘录记事本任务清单 html

食用方法：新建txt文件，复制粘贴代码，修改后缀名为.html，双击打开食用。
bash 复制代码
<!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/6.4.0/css/all.min.css">
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
        }
        
        body {
            background: linear-gradient(135deg, #6a11cb 0%, #2575fc 100%);
            min-height: 100vh;
            display: flex;
            justify-content: center;
            align-items: center;
            padding: 20px;
            color: #333;
        }
        
        .container {
            width: 100%;
            max-width: 800px;
            background: rgba(255, 255, 255, 0.95);
            border-radius: 20px;
            box-shadow: 0 15px 30px rgba(0, 0, 0, 0.2);
            overflow: hidden;
        }
        
        header {
            background: linear-gradient(90deg, #4b6cb7 0%, #182848 100%);
            color: white;
            padding: 25px 30px;
            text-align: center;
        }
        
        h1 {
            font-size: 2.5rem;
            margin-bottom: 5px;
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 15px;
        }
        
        h1 i {
            font-size: 2.2rem;
        }
        
        .subtitle {
            font-weight: 300;
            opacity: 0.9;
        }
        
        .input-section {
            padding: 25px 30px;
            border-bottom: 1px solid #eee;
            background: #f8f9fa;
        }
        
        .input-group {
            display: flex;
            gap: 10px;
        }
        
        .task-input {
            flex: 1;
            padding: 15px 20px;
            border: 2px solid #e0e0e0;
            border-radius: 12px;
            font-size: 1.1rem;
            transition: all 0.3s;
        }
        
        .task-input:focus {
            outline: none;
            border-color: #4b6cb7;
            box-shadow: 0 0 0 3px rgba(75, 108, 183, 0.2);
        }
        
        .add-btn {
            padding: 0 30px;
            background: linear-gradient(90deg, #4b6cb7 0%, #182848 100%);
            color: white;
            border: none;
            border-radius: 12px;
            font-size: 1.1rem;
            font-weight: 600;
            cursor: pointer;
            transition: all 0.3s;
            display: flex;
            align-items: center;
            gap: 8px;
        }
        
        .add-btn:hover {
            transform: translateY(-2px);
            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
        }
        
        .tasks-section {
            padding: 25px 30px;
        }
        
        .section-title {
            display: flex;
            align-items: center;
            gap: 10px;
            margin-bottom: 20px;
            color: #182848;
            font-size: 1.4rem;
        }
        
        .tasks-list {
            list-style: none;
            margin-bottom: 30px;
        }
        
        .task-item {
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 18px 20px;
            background: white;
            border-radius: 12px;
            margin-bottom: 15px;
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.05);
            transition: all 0.3s;
            border-left: 4px solid #4b6cb7;
        }
        
        .task-item:hover {
            transform: translateY(-3px);
            box-shadow: 0 6px 12px rgba(0, 0, 0, 0.1);
        }
        
        .task-content {
            display: flex;
            align-items: center;
            gap: 15px;
            flex: 1;
        }
        
        .task-text {
            font-size: 1.1rem;
            word-break: break-word;
            padding-right: 10px;
        }
        
        .task-actions {
            display: flex;
            gap: 10px;
        }
        
        .action-btn {
            width: 40px;
            height: 40px;
            border-radius: 50%;
            border: none;
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            transition: all 0.3s;
            font-size: 1.1rem;
        }
        
        .complete-btn {
            background: #e8f5e9;
            color: #4caf50;
        }
        
        .complete-btn:hover {
            background: #4caf50;
            color: white;
        }
        
        .delete-btn {
            background: #ffebee;
            color: #f44336;
        }
        
        .delete-btn:hover {
            background: #f44336;
            color: white;
        }
        
        .completed-section {
            background: #f8f9fa;
            padding: 25px 30px;
            border-top: 1px solid #eee;
        }
        
        .toggle-completed {
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 10px;
            width: 100%;
            padding: 15px;
            background: linear-gradient(90deg, #4b6cb7 0%, #182848 100%);
            color: white;
            border: none;
            border-radius: 12px;
            font-size: 1.1rem;
            font-weight: 600;
            cursor: pointer;
            margin-bottom: 20px;
            transition: all 0.3s;
        }
        
        .toggle-completed:hover {
            transform: translateY(-2px);
            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
        }
        
        .completed-list {
            list-style: none;
            display: none;
        }
        
        .completed-list.show {
            display: block;
        }
        
        .completed-task {
            background: #f0f4f8;
            border-left: 4px solid #4caf50;
            opacity: 0.9;
        }
        
        .completed-task .task-text {
            text-decoration: line-through;
            color: #777;
        }
        
        .restore-btn {
            background: #e3f2fd;
            color: #2196f3;
        }
        
        .restore-btn:hover {
            background: #2196f3;
            color: white;
        }
        
        .empty-state {
            text-align: center;
            padding: 40px 20px;
            color: #777;
        }
        
        .empty-state i {
            font-size: 4rem;
            margin-bottom: 20px;
            opacity: 0.3;
        }
        
        .empty-state p {
            font-size: 1.2rem;
        }
        
        @media (max-width: 600px) {
            .input-group {
                flex-direction: column;
            }
            
            .add-btn {
                padding: 15px;
                justify-content: center;
            }
            
            .task-item {
                flex-direction: column;
                align-items: flex-start;
                gap: 15px;
            }
            
            .task-actions {
                align-self: flex-end;
            }
        }
    </style>
</head>
<body>
    <div class="container">
        <header>
            <h1><i class="fas fa-tasks"></i> 智能备忘录</h1>
            <p class="subtitle">记录您的任务，提高工作效率</p>
        </header>
        
        <div class="input-section">
            <div class="input-group">
                <input type="text" class="task-input" id="taskInput" placeholder="输入新任务...">
                <button class="add-btn" id="addTaskBtn">
                    <i class="fas fa-plus"></i> 添加任务
                </button>
            </div>
        </div>
        
        <div class="tasks-section">
            <h2 class="section-title">
                <i class="fas fa-clipboard-list"></i> 待办任务
            </h2>
            <ul class="tasks-list" id="pendingTasks">
                <!-- 未完成任务将在这里显示 -->
                <li class="empty-state" id="pendingEmpty">
                    <i class="fas fa-check-circle"></i>
                    <p>没有待办任务，添加一个新任务吧！</p>
                </li>
            </ul>
        </div>
        
        <div class="completed-section">
            <button class="toggle-completed" id="toggleCompletedBtn">
                <i class="fas fa-chevron-down"></i> 查看已完成任务
            </button>
            
            <ul class="completed-list" id="completedTasks">
                <!-- 已完成任务将在这里显示 -->
                <li class="empty-state" id="completedEmpty">
                    <i class="fas fa-check-double"></i>
                    <p>还没有已完成的任务</p>
                </li>
            </ul>
        </div>
    </div>

    <script>
        // 获取DOM元素
        const taskInput = document.getElementById('taskInput');
        const addTaskBtn = document.getElementById('addTaskBtn');
        const pendingTasksList = document.getElementById('pendingTasks');
        const completedTasksList = document.getElementById('completedTasks');
        const toggleCompletedBtn = document.getElementById('toggleCompletedBtn');
        const pendingEmpty = document.getElementById('pendingEmpty');
        const completedEmpty = document.getElementById('completedEmpty');
        
        // 存储任务数据
        let tasks = JSON.parse(localStorage.getItem('tasks')) || [];
        let showCompleted = false;
        
        // 初始化
        document.addEventListener('DOMContentLoaded', () => {
            renderTasks();
        });
        
        // 添加新任务
        addTaskBtn.addEventListener('click', () => {
            const taskText = taskInput.value.trim();
            if (taskText) {
                addTask(taskText);
                taskInput.value = '';
                taskInput.focus();
            }
        });
        
        // 按Enter键添加任务
        taskInput.addEventListener('keypress', (e) => {
            if (e.key === 'Enter') {
                addTaskBtn.click();
            }
        });
        
        // 切换显示已完成任务
        toggleCompletedBtn.addEventListener('click', () => {
            showCompleted = !showCompleted;
            completedTasksList.classList.toggle('show', showCompleted);
            toggleCompletedBtn.innerHTML = showCompleted ? 
                `<i class="fas fa-chevron-up"></i> 隐藏已完成任务` : 
                `<i class="fas fa-chevron-down"></i> 查看已完成任务`;
        });
        
        // 添加任务函数
        function addTask(text) {
            const task = {
                id: Date.now(),
                text,
                completed: false,
                timestamp: new Date().toISOString()
            };
            
            tasks.push(task);
            saveTasks();
            renderTasks();
        }
        
        // 删除任务
        function deleteTask(id) {
            tasks = tasks.filter(task => task.id !== id);
            saveTasks();
            renderTasks();
        }
        
        // 标记任务为完成/未完成
        function toggleTaskStatus(id) {
            tasks = tasks.map(task => {
                if (task.id === id) {
                    return {...task, completed: !task.completed};
                }
                return task;
            });
            saveTasks();
            renderTasks();
        }
        
        // 保存任务到本地存储
        function saveTasks() {
            localStorage.setItem('tasks', JSON.stringify(tasks));
        }
        
        // 渲染任务列表
        function renderTasks() {
            // 清空列表
            pendingTasksList.innerHTML = '';
            completedTasksList.innerHTML = '';
            
            // 过滤已完成和未完成的任务
            const pendingTasks = tasks.filter(task => !task.completed);
            const completedTasks = tasks.filter(task => task.completed);
            
            // 显示/隐藏空状态
            pendingEmpty.style.display = pendingTasks.length ? 'none' : 'block';
            completedEmpty.style.display = completedTasks.length ? 'none' : 'block';
            
            // 渲染未完成任务
            pendingTasks.forEach(task => {
                const taskItem = createTaskElement(task);
                pendingTasksList.appendChild(taskItem);
            });
            
            // 渲染已完成任务
            completedTasks.forEach(task => {
                const taskItem = createTaskElement(task, true);
                completedTasksList.appendChild(taskItem);
            });
            
            // 如果已完成任务列表有内容，则显示切换按钮
            if (completedTasks.length > 0) {
                completedTasksList.classList.toggle('show', showCompleted);
            }
        }
        
        // 创建任务元素
        function createTaskElement(task, isCompleted = false) {
            const li = document.createElement('li');
            li.className = `task-item ${isCompleted ? 'completed-task' : ''}`;
            li.dataset.id = task.id;
            
            li.innerHTML = `
                <div class="task-content">
                    <span class="task-text">${task.text}</span>
                </div>
                <div class="task-actions">
                    <button class="action-btn ${isCompleted ? 'restore-btn' : 'complete-btn'}" 
                            title="${isCompleted ? '标记为未完成' : '标记为已完成'}">
                        <i class="fas ${isCompleted ? 'fa-undo' : 'fa-check'}"></i>
                    </button>
                    <button class="action-btn delete-btn" title="删除任务">
                        <i class="fas fa-trash"></i>
                    </button>
                </div>
            `;
            
            // 添加事件监听
            li.querySelector('.complete-btn, .restore-btn').addEventListener('click', () => {
                toggleTaskStatus(task.id);
            });
            
            li.querySelector('.delete-btn').addEventListener('click', () => {
                deleteTask(task.id);
            });
            
            return li;
        }
    </script>
</body>
</html>
备忘录记事本 任务清单 html

备忘录记事本任务清单 html
