从零打造高颜值待办事项管理系统：基于 HTML+TailwindCSS + 原生 JS 实现-育师

技术栈：HTML5、TailwindCSS、原生 JavaScript、LocalStorage

一、项目背景与设计理念

在日常开发和生活中，待办事项管理工具是高频需求，但市面上要么功能繁杂，要么界面简陋。本文将手把手教你打造一款高颜值、高性能、功能完整的待办事项管理系统，全程使用原生技术栈，无需框架依赖，兼顾易用性和扩展性。

核心设计理念：

极简交互：符合用户直觉的操作流程，无学习成本
视觉层次感：通过 TailwindCSS 实现渐变、阴影、动效的统一
数据持久化：基于 LocalStorage 实现数据本地存储，无需后端
响应式适配：兼容移动端和桌面端，适配不同屏幕尺寸
人性化提示：操作反馈、倒计时提醒、回收站机制，提升用户体验

二、核心功能拆解

先看成品效果的核心功能模块，让你对整体架构有清晰认知：

1. 基础功能

任务增删改查（CRUD）
任务优先级管理（高 / 中 / 低 / 无）
截止日期设置与倒计时提醒
任务完成状态切换（含视觉反馈）

2. 进阶功能

本地数据持久化（自动保存 / 加载）
回收站机制（30 天自动清理 + 手动清空）
任务筛选（全部 / 未完成 / 已完成）
关键词搜索
数据统计面板（总任务 / 已完成 / 待完成 / 回收站）
完成进度可视化
优先级分布统计

3. 交互体验优化

模态框动效（缩放 / 淡入）
卡片悬停反馈
操作通知提示（自动消失）
自定义复选框样式
响应式布局适配
自定义滚动条

三、技术实现核心要点

1. TailwindCSS 定制化配置

本项目通过 TailwindCSS 实现样式开发，相比传统 CSS，极大提升开发效率，且通过自定义配置保证视觉统一性：

css

tailwind.config = { theme: { extend: { // 自定义主题色 colors: { primary: { 50: '#eff6ff', 100: '#dbeafe', // 省略其他色阶... 900: '#1e3a8a', }, // 优先级配色 priority: { high: '#ef4444', medium: '#f59e0b', low: '#10b981', none: '#94a3b8' } }, // 自定义动画 animation: { 'fade-in': 'fadeIn 0.3s ease-out', 'slide-in': 'slideIn 0.3s ease-out', 'scale-in': 'scaleIn 0.2s ease-out', 'bounce-in': 'bounceIn 0.4s ease-out' }, // 动画关键帧 keyframes: { fadeIn: { '0%': { opacity: '0' }, '100%': { opacity: '1' } }, // 省略其他关键帧... } } } }

设计思考：

主色调选用蓝色系（primary），符合工具类产品的专业、冷静定位
优先级通过高对比度色彩区分（红 / 黄 / 绿 / 灰），视觉识别成本低
动画效果统一时长和缓动函数，避免视觉混乱

2. 数据管理核心逻辑

（1）数据结构设计

javascript

运行

const task = { id: Date.now(), // 时间戳作为唯一ID title: '任务标题', description: '任务描述', priority: 'high/medium/low/none', dueDate: '截止日期', completed: false, // 完成状态 deletedAt: null, // 回收站标记 createdAt: new Date().toISOString() // 创建时间 };

设计思考：

用时间戳作为 ID，无需额外生成算法，简单高效
deletedAt标记删除时间而非直接删除，实现回收站功能
保留创建时间，为后续扩展（如按时间排序 / 筛选）预留空间

（2）LocalStorage 持久化

javascript

运行

// 保存数据 function saveTasks() { localStorage.setItem('tasks', JSON.stringify(tasks)); } // 加载数据 function loadTasks() { const saved = localStorage.getItem('tasks'); if (saved) { tasks = JSON.parse(saved); cleanupRecycle(); // 自动清理30天前的回收站数据 } } // 回收站自动清理 function cleanupRecycle() { const thirtyDaysAgo = new Date(); thirtyDaysAgo.setDate(thirtyDaysAgo.getDate() - 30); tasks = tasks.filter(task => { if (task.deletedAt) { return new Date(task.deletedAt) > thirtyDaysAgo; } return true; }); saveTasks(); }

设计思考：

自动清理过期数据，避免本地存储无限膨胀
加载数据时执行清理，保证每次启动都能维护数据整洁

3. 交互体验优化技巧

（1）自定义复选框

原生复选框样式难以定制，通过 CSS 重置 + 伪元素实现个性化样式：

css

.checkbox-custom { appearance: none; width: 24px; height: 24px; border: 2px solid #cbd5e1; border-radius: 6px; cursor: pointer; transition: all 0.2s ease; position: relative; } .checkbox-custom:checked { background: #3b82f6; border-color: #3b82f6; } .checkbox-custom:checked::after { content: '✓'; position: absolute; color: white; font-size: 16px; top: 50%; left: 50%; transform: translate(-50%, -50%); }

（2）倒计时提醒功能

根据截止日期计算剩余时间，不同阶段显示不同样式（过期 / 警告 / 正常）：

javascript

运行

function getCountdownText(dueDate) { if (!dueDate) return ''; const now = new Date(); const due = new Date(dueDate); const diff = due - now; if (diff < 0) { return '<span class="countdown-expired text-xs"><i class="fas fa-exclamation-circle mr-1"></i>已过期</span>'; } const days = Math.floor(diff / (1000 * 60 * 60 * 24)); const hours = Math.floor((diff % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60)); const minutes = Math.floor((diff % (1000 * 60 * 60)) / (1000 * 60)); if (days === 0 && hours < 24) { if (hours < 6) { return `<span class="countdown-warning text-xs"><i class="fas fa-clock mr-1"></i>剩余 ${hours}小时 ${minutes}分钟</span>`; } return `<span class="countdown-normal text-xs"><i class="fas fa-clock mr-1"></i>剩余 ${hours}小时 ${minutes}分钟</span>`; } return `<span class="countdown-normal text-xs"><i class="fas fa-clock mr-1"></i>剩余 ${days}天 ${hours}小时</span>`; }

设计思考：

6 小时内的任务标为警告色，过期任务标为危险色，强化时间感知
每分钟自动更新倒计时，保证时效性

（3）操作通知提示

javascript

运行

function showNotification(message, type = 'success') { const container = document.getElementById('notificationContainer'); const notification = document.createElement('div'); const bgColor = type === 'success' ? 'bg-green-500' : type === 'error' ? 'bg-red-500' : 'bg-blue-500'; const icon = type === 'success' ? 'fa-check-circle' : type === 'error' ? 'fa-times-circle' : 'fa-info-circle'; notification.className = `notification flex items-center gap-3 px-6 py-4 ${bgColor} text-white rounded-lg shadow-lg`; notification.innerHTML = ` <i class="fas ${icon}"></i> <span>${message}</span> `; container.appendChild(notification); setTimeout(() => notification.remove(), 3000); }

设计思考：

不同操作类型对应不同颜色和图标，反馈更直观
3 秒后自动消失，无需用户手动关闭，减少操作干扰

4. 响应式布局实现

通过 TailwindCSS 的响应式前缀 + 自定义媒体查询，适配不同屏幕：

css

/* 自定义响应式调整 */ @media (max-width: 768px) { .main-layout { flex-direction: column; } }

html

预览

<!-- 栅格响应式 --> <div class="grid grid-cols-2 md:grid-cols-4 gap-4 mb-8"> <!-- 统计卡片 --> </div> <!-- 宽度响应式 --> <div class="w-full md:w-1/3 lg:w-1/4"> <!-- 左侧添加任务面板 --> </div>

设计思考：

移动端将横向布局改为纵向，保证操作空间
统计卡片在移动端 2 列显示，桌面端 4 列显示，兼顾可读性和空间利用率

四、效果展示

本项目作为基础版本，还有很多可扩展的方向，适合二次开发：

1. 功能扩展

分类 / 标签系统：为任务添加分类，支持按分类筛选
提醒功能：结合 Notification API 实现浏览器桌面提醒
数据导出 / 导入：支持 JSON 格式导出，防止数据丢失
拖拽排序：通过 SortableJS 实现任务卡片拖拽排序
深色模式：基于 TailwindCSS 的 dark 模式实现夜间模式

2. 技术扩展

TypeScript 重构：添加类型校验，提升代码可维护性
框架迁移：适配 Vue/React 版本，学习框架与原生的差异
后端对接：结合 Node.js/Express 实现云端存储，支持多设备同步
PWA 改造：实现离线访问、添加到桌面等原生 APP 体验

五、总结与感悟

这款待办事项管理系统虽然基于原生技术栈，但融合了现代前端开发的设计理念和最佳实践：

原生 JS 并非 “过时技术”：合理运用原生 API，配合 TailwindCSS，依然能开发出高性能、高颜值的应用，且无需处理框架的打包、依赖等问题，轻量高效。
用户体验是核心：功能实现只是基础，细节处的动效、反馈、适配，才能让应用从 “能用” 变成 “好用”。比如自定义复选框、倒计时提醒、回收站机制，都是提升用户体验的关键。
可维护性设计：合理的代码结构、清晰的命名、模块化的函数，让后续扩展和维护变得简单。比如数据管理与 UI 渲染分离，便于后续替换存储方案或 UI 框架。
渐进式开发思路：先实现核心功能，再逐步优化体验、扩展功能，符合小步快跑的开发理念，避免一开始就陷入过度设计。

完整代码已整理完毕，你可以直接复制使用，也可以根据自己的需求进行二次开发。希望这个项目能帮助你巩固原生 JS 和 CSS 的知识点，同时也能真正解决日常待办管理的需求！