HTML智能网页工作便签 | 轻便快捷的在线任务管理工具

有为

这是一款基于HTML开发的智能网页工作便签工具，设计轻便、无需安装，适合在任意设备上快速记录与管理待办事项。工具支持多主题切换、JSON数据导入导出，以及任务完成状态管理，帮助您高效组织日常工作与灵感。

功能说明：

• 便签显示：默认按创建时间倒序排列，最新内容置顶显示
• 主题选择：提供6种风格主题，适配不同使用场景，并支持消息通知
  • 红色主题：强调重要事项，突出活力感
  • 青色主题：清新科技风格，适合技术工作者
  • 琥珀色主题：温暖明亮，适用于创意记录
  • 靛蓝色主题：沉稳专业，适配商务用途
  • 玫瑰色主题：温柔浪漫，适合个人笔记
  • 青绿色主题：时尚年轻化设计
    
    
• 数据管理：支持JSON格式一键导入与导出，便于数据备份与迁移
• 任务操作：可标记单项任务完成，也支持一键完成所有任务
  
  

关键代码：

1.         // 加载保存的主题
   
2.         function loadTheme() {
   
3.             const savedTheme = localStorage.getItem(THEME_KEY);
   
4.             if (savedTheme) {
   
5.                 currentTheme = savedTheme;
   
6.                 document.body.className = savedTheme;
   
7.                 document.getElementById('theme-select').value = savedTheme;
   
8.             }
   
9.         }
   
10. 
    
11.         // 切换主题
    
12.         function switchTheme(theme) {
    
13.             document.body.className = theme;
    
14.             currentTheme = theme;
    
15.             localStorage.setItem(THEME_KEY, theme);
    
16.             document.getElementById('theme-select').value = theme;
    
17.             showToast('主题已切换！');
    
18.         }
    
19.                 ...
    
20.         // 从本地存储获取便签数据
    
21.         function getNotesFromStorage() {
    
22.             const notesJSON = localStorage.getItem(STORAGE_KEY);
    
23.             const notes = notesJSON ? JSON.parse(notesJSON) : [];
    
24. 
    
25.             // 确保每个便签都有completed属性
    
26.             return notes.map(note => ({
    
27.                 ...note,
    
28.                 completed: note.completed || false
    
29.             }));
    
30.         }
    
31. 
    
32.         // 保存便签到本地存储
    
33.         function saveNotesToStorage(notes) {
    
34.             localStorage.setItem(STORAGE_KEY, JSON.stringify(notes));
    
35.         }
    
36.                 ...

复制代码

获取地址：

游客，如果您要查看本帖隐藏内容请回复至少1次，目前您回复了0次！