{"id":292,"date":"2026-03-19T22:33:17","date_gmt":"2026-03-19T14:33:17","guid":{"rendered":"https:\/\/www.resilence.cn\/?p=292"},"modified":"2026-03-19T22:33:17","modified_gmt":"2026-03-19T14:33:17","slug":"day-24-%e9%a1%b9%e7%9b%ae6-%e5%be%85%e5%8a%9e%e4%ba%8b%e9%a1%b9%e5%ba%94%e7%94%a8","status":"publish","type":"post","link":"https:\/\/www.resilence.cn\/?p=292","title":{"rendered":"Day-24-\u9879\u76ee6-\u5f85\u529e\u4e8b\u9879\u5e94\u7528"},"content":{"rendered":"

Day 24: \u9879\u76ee6-\u5f85\u529e\u4e8b\u9879\u5e94\u7528<\/h1>\n
\n

\ud83d\udcc5 \u65e5\u671f: 2026\u5e7403\u670818\u65e5
\n\ud83c\udfaf \u5b66\u4e60\u76ee\u6807: \u521b\u5efa\u4e00\u4e2a\u5b8c\u6574\u7684\u5f85\u529e\u4e8b\u9879\u5e94\u7528\uff0c\u5b9e\u73b0 CRUD \u64cd\u4f5c
\n\u23f1\ufe0f \u9884\u8ba1\u7528\u65f6: 3-4 \u5c0f\u65f6
\n\ud83d\udcc2 \u5206\u7c7b: 10-\u73b0\u4ee3JavaScript<\/p>\n<\/blockquote>\n

\n

\ud83c\udfaf \u5b66\u4e60\u76ee\u6807<\/h2>\n

\u901a\u8fc7\u4eca\u5929\u7684\u5b9e\u6218\u9879\u76ee\uff0c\u4f60\u5c06\uff1a<\/p>\n

    \n
  1. \u638c\u63e1 CRUD \u64cd\u4f5c<\/strong>\uff1a\u521b\u5efa\u3001\u8bfb\u53d6\u3001\u66f4\u65b0\u3001\u5220\u9664<\/li>\n
  2. \u6df1\u5165\u7406\u89e3 localStorage<\/strong>\uff1a\u6d4f\u89c8\u5668\u6570\u636e\u6301\u4e45\u5316<\/li>\n
  3. \u5b66\u4f1a\u72b6\u6001\u7ba1\u7406<\/strong>\uff1a\u6570\u636e\u9a71\u52a8\u89c6\u56fe\u66f4\u65b0<\/li>\n
  4. \u5b9e\u73b0\u7b5b\u9009\u6392\u5e8f<\/strong>\uff1a\u6309\u72b6\u6001\u3001\u65e5\u671f\u7b5b\u9009<\/li>\n
  5. \u5e94\u7528\u6700\u4f73\u5b9e\u8df5<\/strong>\uff1a\u6a21\u5757\u5316\u4ee3\u7801\u3001\u4e8b\u4ef6\u59d4\u6258<\/li>\n<\/ol>\n
    \n

    \ud83d\udca1 \u9879\u76ee\u9700\u6c42<\/h2>\n

    \u6211\u4eec\u8981\u521b\u5efa\u4e00\u4e2a \u5f85\u529e\u4e8b\u9879\u5e94\u7528<\/strong>\uff0c\u5177\u6709\u4ee5\u4e0b\u529f\u80fd\uff1a<\/p>\n

    \u6838\u5fc3\u529f\u80fd<\/h3>\n
      \n
    1. \u6dfb\u52a0\u4efb\u52a1<\/strong>\uff1a\u8f93\u5165\u6807\u9898\uff0c\u9009\u62e9\u4f18\u5148\u7ea7\u3001\u622a\u6b62\u65e5\u671f<\/li>\n
    2. \u663e\u793a\u5217\u8868<\/strong>\uff1a\u5c55\u793a\u6240\u6709\u4efb\u52a1\uff0c\u652f\u6301\u72b6\u6001\u7b5b\u9009<\/li>\n
    3. \u7f16\u8f91\u4efb\u52a1<\/strong>\uff1a\u4fee\u6539\u6807\u9898\u3001\u4f18\u5148\u7ea7\u3001\u72b6\u6001<\/li>\n
    4. \u5220\u9664\u4efb\u52a1<\/strong>\uff1a\u5355\u4e2a\u5220\u9664\u6216\u6279\u91cf\u5220\u9664<\/li>\n
    5. \u6570\u636e\u6301\u4e45\u5316<\/strong>\uff1a\u5237\u65b0\u9875\u9762\u540e\u6570\u636e\u4e0d\u4e22\u5931<\/li>\n<\/ol>\n

      UI \u8bbe\u8ba1<\/h3>\n
        \n
      • \u8f93\u5165\u533a<\/strong>\uff1a\u6807\u9898\u8f93\u5165\u6846\u3001\u4f18\u5148\u7ea7\u9009\u62e9\u3001\u65e5\u671f\u9009\u62e9\u3001\u6dfb\u52a0\u6309\u94ae<\/li>\n
      • \u7b5b\u9009\u533a<\/strong>\uff1a\u5168\u90e8\/\u672a\u5b8c\u6210\/\u5df2\u5b8c\u6210\u5207\u6362<\/li>\n
      • \u4efb\u52a1\u5217\u8868<\/strong>\uff1a\u6bcf\u4e2a\u4efb\u52a1\u663e\u793a\u6807\u9898\u3001\u4f18\u5148\u7ea7\u3001\u65e5\u671f\u3001\u64cd\u4f5c\u6309\u94ae<\/li>\n
      • \u7edf\u8ba1\u680f<\/strong>\uff1a\u603b\u4efb\u52a1\u6570\u3001\u5df2\u5b8c\u6210\u6570\u3001\u672a\u5b8c\u6210\u6570<\/li>\n<\/ul>\n
        \n

        \ud83d\udcdd \u6838\u5fc3\u6982\u5ff5<\/h2>\n

        1. CRUD \u64cd\u4f5c<\/h3>\n
        \/\/ Create - \u521b\u5efa\nfunction addTodo(todo) {\n    const newTodo = {\n        id: Date.now(),\n        title: todo.title,\n        priority: todo.priority,\n        dueDate: todo.dueDate,\n        completed: false,\n        createdAt: new Date().toISOString()\n    };\n    todos.push(newTodo);\n    saveTodos();\n    renderTodos();\n}\n\n\/\/ Read - \u8bfb\u53d6\nfunction getTodos(filter = 'all') {\n    if (filter === 'active') {\n        return todos.filter(t => !t.completed);\n    } else if (filter === 'completed') {\n        return todos.filter(t => t.completed);\n    }\n    return todos;\n}\n\n\/\/ Update - \u66f4\u65b0\nfunction updateTodo(id, updates) {\n    const index = todos.findIndex(t => t.id === id);\n    if (index !== -1) {\n        todos[index] = { ...todos[index], ...updates };\n        saveTodos();\n        renderTodos();\n    }\n}\n\n\/\/ Delete - \u5220\u9664\nfunction deleteTodo(id) {\n    todos = todos.filter(t => t.id !== id);\n    saveTodos();\n    renderTodos();\n}\n<\/code><\/pre>\n
        2. localStorage API<\/h3>\n
        \/\/ \u4fdd\u5b58\u6570\u636e\nfunction saveTodos() {\n    localStorage.setItem('todos', JSON.stringify(todos));\n}\n\n\/\/ \u8bfb\u53d6\u6570\u636e\nfunction loadTodos() {\n    const data = localStorage.getItem('todos');\n    if (data) {\n        todos = JSON.parse(data);\n    } else {\n        todos = [];\n    }\n}\n\n\/\/ \u6e05\u9664\u6570\u636e\nfunction clearTodos() {\n    localStorage.removeItem('todos');\n    todos = [];\n}\n<\/code><\/pre>\n
        3. \u6570\u636e\u9a71\u52a8\u89c6\u56fe<\/h3>\n
        \/\/ \u72b6\u6001\u53d8\u5316 \u2192 \u66f4\u65b0\u6570\u636e \u2192 \u91cd\u65b0\u6e32\u67d3\nlet currentFilter = 'all';\n\nfunction setFilter(filter) {\n    currentFilter = filter;\n    renderTodos();  \/\/ \u6570\u636e\u9a71\u52a8\u89c6\u56fe\n}\n\nfunction renderTodos() {\n    const filteredTodos = getTodos(currentFilter);\n    const html = filteredTodos.map(todo => createTodoHTML(todo)).join('');\n    todoList.innerHTML = html;\n    updateStats();\n}\n<\/code><\/pre>\n
        \n
        \ud83d\udee0\ufe0f DOM \u64cd\u4f5c\u65b9\u6cd5<\/h2>\n
        1. \u52a8\u6001\u521b\u5efa\u4efb\u52a1<\/h3>\n
        function createTodoElement(todo) {\n    const li = document.createElement('li');\n    li.className = 'todo-item';\n    li.dataset.id = todo.id;\n    \n    \/\/ \u590d\u9009\u6846\n    const checkbox = document.createElement('input');\n    checkbox.type = 'checkbox';\n    checkbox.className = 'todo-checkbox';\n    checkbox.checked = todo.completed;\n    \n    \/\/ \u6807\u9898\n    const span = document.createElement('span');\n    span.className = 'todo-title';\n    span.textContent = todo.title;\n    \n    \/\/ \u4f18\u5148\u7ea7\u6807\u7b7e\n    const priority = document.createElement('span');\n    priority.className = `priority priority-${todo.priority}`;\n    priority.textContent = todo.priority.toUpperCase();\n    \n    \/\/ \u5220\u9664\u6309\u94ae\n    const deleteBtn = document.createElement('button');\n    deleteBtn.className = 'todo-delete';\n    deleteBtn.textContent = '\u00d7';\n    \n    li.append(checkbox, span, priority, deleteBtn);\n    return li;\n}\n<\/code><\/pre>\n
        2. \u4e8b\u4ef6\u59d4\u6258<\/h3>\n
        \/\/ \u4f7f\u7528\u4e8b\u4ef6\u59d4\u6258\u5904\u7406\u6240\u6709\u4efb\u52a1\u70b9\u51fb\ntodoList.addEventListener('click', (event) => {\n    const todoItem = event.target.closest('.todo-item');\n    if (!todoItem) return;\n    \n    const todoId = parseInt(todoItem.dataset.id);\n    \n    \/\/ \u590d\u9009\u6846\u70b9\u51fb\n    if (event.target.matches('.todo-checkbox')) {\n        toggleTodo(todoId);\n    }\n    \n    \/\/ \u5220\u9664\u6309\u94ae\u70b9\u51fb\n    if (event.target.matches('.todo-delete')) {\n        deleteTodo(todoId);\n    }\n});\n<\/code><\/pre>\n
        3. \u8868\u5355\u5904\u7406<\/h3>\n
        function handleAddTodo(event) {\n    event.preventDefault();  \/\/ \u963b\u6b62\u8868\u5355\u63d0\u4ea4\n    \n    const titleInput = document.getElementById('todo-title');\n    const prioritySelect = document.getElementById('todo-priority');\n    const dateInput = document.getElementById('todo-date');\n    \n    const title = titleInput.value.trim();\n    if (!title) {\n        showError('\u8bf7\u8f93\u5165\u4efb\u52a1\u6807\u9898');\n        return;\n    }\n    \n    const newTodo = {\n        title: title,\n        priority: prioritySelect.value,\n        dueDate: dateInput.value,\n        completed: false\n    };\n    \n    addTodo(newTodo);\n    \n    \/\/ \u6e05\u7a7a\u8868\u5355\n    titleInput.value = '';\n    dateInput.value = '';\n    titleInput.focus();\n}\n<\/code><\/pre>\n
        \n
        \ud83c\udfae \u5b8c\u6574\u9879\u76ee\u4ee3\u7801<\/h2>\n
        HTML \u7ed3\u6784<\/h3>\n
        <!DOCTYPE html>\n<html lang="zh-CN">\n<head>\n    <meta charset="UTF-8">\n    <meta name="viewport" content="width=device-width, initial-scale=1.0">\n    <title>\u5f85\u529e\u4e8b\u9879\u5e94\u7528<\/title>\n    <link rel="stylesheet" href="style.css">\n<\/head>\n<body>\n    <div class="container">\n        <header>\n            <h1>\ud83d\udcdd \u5f85\u529e\u4e8b\u9879<\/h1>\n            <div class="stats">\n                <span class="stat">\u603b\u4efb\u52a1: <strong id="total-count">0<\/strong><\/span>\n                <span class="stat">\u5df2\u5b8c\u6210: <strong id="completed-count">0<\/strong><\/span>\n                <span class="stat">\u672a\u5b8c\u6210: <strong id="active-count">0<\/strong><\/span>\n            <\/div>\n        <\/header>\n        \n        <!-- \u6dfb\u52a0\u4efb\u52a1\u8868\u5355 -->\n        <form id="todo-form" class="todo-form">\n            <input \n                type="text" \n                id="todo-title" \n                class="todo-input" \n                placeholder="\u8f93\u5165\u4efb\u52a1\u6807\u9898..."\n                autocomplete="off"\n            >\n            <select id="todo-priority" class="todo-priority">\n                <option value="low">\u4f4e\u4f18\u5148\u7ea7<\/option>\n                <option value="medium" selected>\u4e2d\u4f18\u5148\u7ea7<\/option>\n                <option value="high">\u9ad8\u4f18\u5148\u7ea7<\/option>\n            <\/select>\n            <input \n                type="date" \n                id="todo-date" \n                class="todo-date"\n            >\n            <button type="submit" class="btn-add">\u6dfb\u52a0<\/button>\n        <\/form>\n        \n        <!-- \u7b5b\u9009\u5668 -->\n        <div class="filters">\n            <button class="filter-btn active" data-filter="all">\u5168\u90e8<\/button>\n            <button class="filter-btn" data-filter="active">\u672a\u5b8c\u6210<\/button>\n            <button class="filter-btn" data-filter="completed">\u5df2\u5b8c\u6210<\/button>\n        <\/div>\n        \n        <!-- \u4efb\u52a1\u5217\u8868 -->\n        <ul id="todo-list" class="todo-list"><\/ul>\n        \n        <!-- \u7a7a\u72b6\u6001 -->\n        <div id="empty-state" class="empty-state hidden">\n            <p>\ud83c\udf89 \u6682\u65e0\u4efb\u52a1\uff0c\u5f00\u59cb\u6dfb\u52a0\u5427\uff01<\/p>\n        <\/div>\n    <\/div>\n    \n    <script src="app.js"><\/script>\n<\/body>\n<\/html>\n<\/code><\/pre>\n
        CSS \u6837\u5f0f<\/h3>\n
        * {\n    margin: 0;\n    padding: 0;\n    box-sizing: border-box;\n}\n\nbody {\n    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;\n    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);\n    min-height: 100vh;\n    padding: 20px;\n}\n\n.container {\n    max-width: 800px;\n    margin: 0 auto;\n    background: white;\n    border-radius: 20px;\n    padding: 30px;\n    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.2);\n}\n\n\/* \u5934\u90e8 *\/\nheader {\n    text-align: center;\n    margin-bottom: 30px;\n}\n\nh1 {\n    color: #667eea;\n    margin-bottom: 20px;\n    font-size: 2em;\n}\n\n.stats {\n    display: flex;\n    justify-content: center;\n    gap: 30px;\n    color: #666;\n}\n\n.stat {\n    font-size: 0.9em;\n}\n\n.stat strong {\n    color: #667eea;\n    font-size: 1.2em;\n}\n\n\/* \u8868\u5355 *\/\n.todo-form {\n    display: flex;\n    gap: 10px;\n    margin-bottom: 20px;\n    flex-wrap: wrap;\n}\n\n.todo-input {\n    flex: 1;\n    min-width: 200px;\n    padding: 12px 20px;\n    border: 2px solid #e0e0e0;\n    border-radius: 10px;\n    font-size: 1em;\n    transition: border-color 0.3s;\n}\n\n.todo-input:focus {\n    outline: none;\n    border-color: #667eea;\n}\n\n.todo-priority {\n    padding: 12px 20px;\n    border: 2px solid #e0e0e0;\n    border-radius: 10px;\n    font-size: 1em;\n    cursor: pointer;\n}\n\n.todo-date {\n    padding: 12px 20px;\n    border: 2px solid #e0e0e0;\n    border-radius: 10px;\n    font-size: 1em;\n}\n\n.btn-add {\n    padding: 12px 30px;\n    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);\n    color: white;\n    border: none;\n    border-radius: 10px;\n    font-size: 1em;\n    cursor: pointer;\n    transition: transform 0.2s;\n}\n\n.btn-add:hover {\n    transform: translateY(-2px);\n}\n\n.btn-add:active {\n    transform: translateY(0);\n}\n\n\/* \u7b5b\u9009\u5668 *\/\n.filters {\n    display: flex;\n    gap: 10px;\n    margin-bottom: 20px;\n    justify-content: center;\n}\n\n.filter-btn {\n    padding: 8px 20px;\n    border: 2px solid #e0e0e0;\n    background: white;\n    border-radius: 20px;\n    cursor: pointer;\n    transition: all 0.3s;\n}\n\n.filter-btn:hover {\n    border-color: #667eea;\n}\n\n.filter-btn.active {\n    background: #667eea;\n    color: white;\n    border-color: #667eea;\n}\n\n\/* \u4efb\u52a1\u5217\u8868 *\/\n.todo-list {\n    list-style: none;\n}\n\n.todo-item {\n    display: flex;\n    align-items: center;\n    gap: 15px;\n    padding: 15px;\n    background: #f8f9fa;\n    border-radius: 10px;\n    margin-bottom: 10px;\n    transition: all 0.3s;\n}\n\n.todo-item:hover {\n    background: #e9ecef;\n    transform: translateX(5px);\n}\n\n.todo-checkbox {\n    width: 20px;\n    height: 20px;\n    cursor: pointer;\n}\n\n.todo-title {\n    flex: 1;\n    font-size: 1.1em;\n    color: #333;\n}\n\n.todo-item.completed .todo-title {\n    text-decoration: line-through;\n    color: #999;\n}\n\n.priority {\n    padding: 4px 12px;\n    border-radius: 12px;\n    font-size: 0.8em;\n    font-weight: bold;\n}\n\n.priority-low {\n    background: #d4edda;\n    color: #155724;\n}\n\n.priority-medium {\n    background: #fff3cd;\n    color: #856404;\n}\n\n.priority-high {\n    background: #f8d7da;\n    color: #721c24;\n}\n\n.todo-delete {\n    width: 30px;\n    height: 30px;\n    border: none;\n    background: #dc3545;\n    color: white;\n    border-radius: 50%;\n    font-size: 1.5em;\n    cursor: pointer;\n    transition: transform 0.2s;\n}\n\n.todo-delete:hover {\n    transform: scale(1.1);\n}\n\n.todo-date {\n    font-size: 0.9em;\n    color: #666;\n}\n\n\/* \u7a7a\u72b6\u6001 *\/\n.empty-state {\n    text-align: center;\n    padding: 60px 20px;\n    color: #999;\n}\n\n.empty-state.hidden {\n    display: none;\n}\n\n.empty-state p {\n    font-size: 1.2em;\n}\n\n\/* \u52a8\u753b *\/\n@keyframes slideIn {\n    from {\n        opacity: 0;\n        transform: translateY(-10px);\n    }\n    to {\n        opacity: 1;\n        transform: translateY(0);\n    }\n}\n\n.todo-item {\n    animation: slideIn 0.3s ease-out;\n}\n\n\/* \u54cd\u5e94\u5f0f\u8bbe\u8ba1 *\/\n@media (max-width: 600px) {\n    .todo-form {\n        flex-direction: column;\n    }\n    \n    .todo-input,\n    .todo-priority,\n    .todo-date,\n    .btn-add {\n        width: 100%;\n    }\n    \n    .stats {\n        flex-direction: column;\n        gap: 10px;\n    }\n}\n<\/code><\/pre>\n
        JavaScript \u903b\u8f91<\/h3>\n
        \/\/ ==================== \u72b6\u6001\u7ba1\u7406 ====================\nlet todos = [];\nlet currentFilter = 'all';\n\n\/\/ ==================== DOM \u5143\u7d20 ====================\nconst todoForm = document.getElementById('todo-form');\nconst todoInput = document.getElementById('todo-title');\nconst todoPriority = document.getElementById('todo-priority');\nconst todoDate = document.getElementById('todo-date');\nconst todoList = document.getElementById('todo-list');\nconst emptyState = document.getElementById('empty-state');\nconst filterButtons = document.querySelectorAll('.filter-btn');\nconst totalCount = document.getElementById('total-count');\nconst completedCount = document.getElementById('completed-count');\nconst activeCount = document.getElementById('active-count');\n\n\/\/ ==================== \u521d\u59cb\u5316 ====================\nfunction init() {\n    loadTodos();\n    renderTodos();\n    setupEventListeners();\n}\n\n\/\/ ==================== CRUD \u64cd\u4f5c ====================\n\n\/\/ \u521b\u5efa\u4efb\u52a1\nfunction addTodo(todo) {\n    const newTodo = {\n        id: Date.now(),\n        title: todo.title,\n        priority: todo.priority || 'medium',\n        dueDate: todo.dueDate || null,\n        completed: false,\n        createdAt: new Date().toISOString()\n    };\n    \n    todos.push(newTodo);\n    saveTodos();\n    renderTodos();\n}\n\n\/\/ \u8bfb\u53d6\u4efb\u52a1\nfunction getTodos(filter = 'all') {\n    let filtered = todos;\n    \n    if (filter === 'active') {\n        filtered = todos.filter(t => !t.completed);\n    } else if (filter === 'completed') {\n        filtered = todos.filter(t => t.completed);\n    }\n    \n    \/\/ \u6309\u4f18\u5148\u7ea7\u6392\u5e8f\n    return filtered.sort((a, b) => {\n        const priorityOrder = { high: 3, medium: 2, low: 1 };\n        return priorityOrder[b.priority] - priorityOrder[a.priority];\n    };\n}\n\n\/\/ \u66f4\u65b0\u4efb\u52a1\nfunction updateTodo(id, updates) {\n    const index = todos.findIndex(t => t.id === id);\n    if (index !== -1) {\n        todos[index] = { ...todos[index], ...updates };\n        saveTodos();\n        renderTodos();\n    }\n}\n\n\/\/ \u5220\u9664\u4efb\u52a1\nfunction deleteTodo(id) {\n    todos = todos.filter(t => t.id !== id);\n    saveTodos();\n    renderTodos();\n}\n\n\/\/ \u5207\u6362\u5b8c\u6210\u72b6\u6001\nfunction toggleTodo(id) {\n    const todo = todos.find(t => t.id === id);\n    if (todo) {\n        updateTodo(id, { completed: !todo.completed });\n    }\n}\n\n\/\/ ==================== localStorage ====================\n\nfunction saveTodos() {\n    localStorage.setItem('todos', JSON.stringify(todos));\n}\n\nfunction loadTodos() {\n    const data = localStorage.getItem('todos');\n    if (data) {\n        todos = JSON.parse(data);\n    } else {\n        todos = [];\n    }\n}\n\n\/\/ ==================== \u6e32\u67d3 ====================\n\nfunction renderTodos() {\n    const filteredTodos = getTodos(currentFilter);\n    \n    \/\/ \u6e05\u7a7a\u5217\u8868\n    todoList.innerHTML = '';\n    \n    \/\/ \u663e\u793a\/\u9690\u85cf\u7a7a\u72b6\u6001\n    if (filteredTodos.length === 0) {\n        emptyState.classList.remove('hidden');\n    } else {\n        emptyState.classList.add('hidden');\n        \n        \/\/ \u6e32\u67d3\u6bcf\u4e2a\u4efb\u52a1\n        filteredTodos.forEach(todo => {\n            const todoElement = createTodoElement(todo);\n            todoList.appendChild(todoElement);\n        });\n    }\n    \n    \/\/ \u66f4\u65b0\u7edf\u8ba1\n    updateStats();\n}\n\nfunction createTodoElement(todo) {\n    const li = document.createElement('li');\n    li.className = `todo-item ${todo.completed ? 'completed' : ''}`;\n    li.dataset.id = todo.id;\n    \n    \/\/ \u590d\u9009\u6846\n    const checkbox = document.createElement('input');\n    checkbox.type = 'checkbox';\n    checkbox.className = 'todo-checkbox';\n    checkbox.checked = todo.completed;\n    \n    \/\/ \u6807\u9898\n    const span = document.createElement('span');\n    span.className = 'todo-title';\n    span.textContent = todo.title;\n    \n    \/\/ \u4f18\u5148\u7ea7\u6807\u7b7e\n    const priority = document.createElement('span');\n    priority.className = `priority priority-${todo.priority}`;\n    priority.textContent = todo.priority.toUpperCase();\n    \n    \/\/ \u65e5\u671f\uff08\u5982\u679c\u6709\uff09\n    if (todo.dueDate) {\n        const dateSpan = document.createElement('span');\n        dateSpan.className = 'todo-date';\n        dateSpan.textContent = formatDate(todo.dueDate);\n        li.appendChild(dateSpan);\n    }\n    \n    \/\/ \u5220\u9664\u6309\u94ae\n    const deleteBtn = document.createElement('button');\n    deleteBtn.className = 'todo-delete';\n    deleteBtn.textContent = '\u00d7';\n    deleteBtn.title = '\u5220\u9664\u4efb\u52a1';\n    \n    li.append(checkbox, span, priority, deleteBtn);\n    \n    return li;\n}\n\nfunction updateStats() {\n    const total = todos.length;\n    const completed = todos.filter(t => t.completed).length;\n    const active = total - completed;\n    \n    totalCount.textContent = total;\n    completedCount.textContent = completed;\n    activeCount.textContent = active;\n}\n\nfunction formatDate(dateString) {\n    const date = new Date(dateString);\n    const options = { month: 'short', day: 'numeric' };\n    return date.toLocaleDateString('zh-CN', options);\n}\n\n\/\/ ==================== \u4e8b\u4ef6\u5904\u7406 ====================\n\nfunction setupEventListeners() {\n    \/\/ \u8868\u5355\u63d0\u4ea4\n    todoForm.addEventListener('submit', handleAddTodo);\n    \n    \/\/ \u4efb\u52a1\u5217\u8868\u70b9\u51fb\uff08\u4e8b\u4ef6\u59d4\u6258\uff09\n    todoList.addEventListener('click', handleTodoClick);\n    \n    \/\/ \u7b5b\u9009\u6309\u94ae\n    filterButtons.forEach(btn => {\n        btn.addEventListener('click', handleFilterClick);\n    });\n}\n\nfunction handleAddTodo(event) {\n    event.preventDefault();\n    \n    const title = todoInput.value.trim();\n    if (!title) {\n        alert('\u8bf7\u8f93\u5165\u4efb\u52a1\u6807\u9898');\n        return;\n    }\n    \n    const newTodo = {\n        title: title,\n        priority: todoPriority.value,\n        dueDate: todoDate.value || null\n    };\n    \n    addTodo(newTodo);\n    \n    \/\/ \u6e05\u7a7a\u8f93\u5165\n    todoInput.value = '';\n    todoDate.value = '';\n    todoInput.focus();\n}\n\nfunction handleTodoClick(event) {\n    const todoItem = event.target.closest('.todo-item');\n    if (!todoItem) return;\n    \n    const todoId = parseInt(todoItem.dataset.id);\n    \n    \/\/ \u590d\u9009\u6846\u70b9\u51fb\n    if (event.target.matches('.todo-checkbox')) {\n        toggleTodo(todoId);\n    }\n    \n    \/\/ \u5220\u9664\u6309\u94ae\u70b9\u51fb\n    if (event.target.matches('.todo-delete')) {\n        if (confirm('\u786e\u5b9a\u8981\u5220\u9664\u8fd9\u4e2a\u4efb\u52a1\u5417\uff1f')) {\n            deleteTodo(todoId);\n        }\n    }\n}\n\nfunction handleFilterClick(event) {\n    const filter = event.target.dataset.filter;\n    \n    \/\/ \u66f4\u65b0\u5f53\u524d\u7b5b\u9009\n    currentFilter = filter;\n    \n    \/\/ \u66f4\u65b0\u6309\u94ae\u72b6\u6001\n    filterButtons.forEach(btn => {\n        btn.classList.remove('active');\n    });\n    event.target.classList.add('active');\n    \n    \/\/ \u91cd\u65b0\u6e32\u67d3\n    renderTodos();\n}\n\n\/\/ ==================== \u542f\u52a8\u5e94\u7528 ====================\ninit();\n<\/code><\/pre>\n
        \n
        \u26a0\ufe0f \u91cd\u8981\u6ce8\u610f\u4e8b\u9879<\/h2>\n
        1. localStorage \u9650\u5236<\/h3>\n
        \/\/ \u2705 \u6b63\u786e\uff1a\u68c0\u67e5\u53ef\u7528\u6027\nfunction isLocalStorageAvailable() {\n    try {\n        const test = '__storage_test__';\n        localStorage.setItem(test, test);\n        localStorage.removeItem(test);\n        return true;\n    } catch (e) {\n        return false;\n    }\n}\n\n\/\/ \u274c \u9519\u8bef\uff1a\u4e0d\u68c0\u67e5\u76f4\u63a5\u4f7f\u7528\nlocalStorage.setItem('key', 'value');  \/\/ \u53ef\u80fd\u629b\u51fa\u5f02\u5e38\n<\/code><\/pre>\n
        2. JSON \u5e8f\u5217\u5316<\/h3>\n
        \/\/ localStorage \u53ea\u80fd\u5b58\u50a8\u5b57\u7b26\u4e32\n\/\/ \u2705 \u6b63\u786e\uff1a\u5e8f\u5217\u5316\u5bf9\u8c61\nlocalStorage.setItem('todos', JSON.stringify(todos));\n\n\/\/ \u2705 \u6b63\u786e\uff1a\u89e3\u6790 JSON\ntodos = JSON.parse(localStorage.getItem('todos') || '[]');\n\n\/\/ \u274c \u9519\u8bef\uff1a\u76f4\u63a5\u5b58\u50a8\u5bf9\u8c61\nlocalStorage.setItem('todos', todos);  \/\/ \u5b58\u50a8\u4e3a "[object Object]"\n<\/code><\/pre>\n
        3. XSS \u9632\u62a4<\/h3>\n
        \/\/ \u2705 \u4f7f\u7528 textContent \u800c\u4e0d\u662f innerHTML\nspan.textContent = todo.title;  \/\/ \u5b89\u5168\n\n\/\/ \u274c \u5371\u9669\uff1a\u5982\u679c title \u5305\u542b HTML\nspan.innerHTML = todo.title;  \/\/ \u53ef\u80fd\u5bfc\u81f4 XSS \u653b\u51fb\n<\/code><\/pre>\n
        4. \u6570\u636e\u9a8c\u8bc1<\/h3>\n
        function addTodo(todo) {\n    \/\/ \u9a8c\u8bc1\u5fc5\u586b\u5b57\u6bb5\n    if (!todo.title || todo.title.trim() === '') {\n        throw new Error('\u6807\u9898\u4e0d\u80fd\u4e3a\u7a7a');\n    }\n    \n    \/\/ \u9a8c\u8bc1\u4f18\u5148\u7ea7\n    const validPriorities = ['low', 'medium', 'high'];\n    if (!validPriorities.includes(todo.priority)) {\n        todo.priority = 'medium';  \/\/ \u9ed8\u8ba4\u503c\n    }\n    \n    \/\/ ... \u7ee7\u7eed\u5904\u7406\n}\n<\/code><\/pre>\n
        \n
        \ud83c\udf93 \u5b9e\u6218\u5e94\u7528\u573a\u666f<\/h2>\n
        \u573a\u666f 1: \u4e2a\u4eba\u4efb\u52a1\u7ba1\u7406<\/h3>\n