当前位置：首页 > news >正文

备忘录记事本任务清单 html

news 2025/8/6 8:38:25

食用方法：新建txt文件，复制粘贴代码，修改后缀名为.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/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>