我用代码给自己做了个心情日历!

记录情绪，就是记录成长。每个月末回望，那些开心、难过、平静或激动的日子，都在日历上变成了彩色的小符号。

✨ 突发奇想：如果有个日历可以记录心情

最近总在思考，我的情绪就像天气一样多变，时而晴朗，时而多云。但真正回想起来，这个月是快乐多还是焦虑多？那些低谷是怎么度过的？高峰时刻又是因为什么？

普通的日历只能记录事件，却无法捕捉情绪的温度。于是，作为一个爱折腾的程序媛，我决定给自己打造一个专属心情日历！

🎨 设计思路：把情绪可视化

我想要的日历要满足这些小心思：

1. 一眼看到整个月的情绪变化 - 就像看天气图一样直观
2. 简单记录，没有压力 - 不需要写小作文，一个表情就够了
3. 私密且安全 - 只属于我的情绪空间
4. 随时回顾和统计 - 看看这个月哪种情绪是“常客”

经过几天的coding，我的心情日历诞生了！👇

日历展示

选择心情标签

本月心情统计

💻 技术实现：原来没有想象中复杂

核心就是HTML + CSS + JavaScript三件套，数据用localStorage存着，完全在本地运行，超级安全！

1. 情绪分类系统

我选了8种最常有的情绪，每种都有专属表情和颜色：

• 😲  吃惊（明亮橙色）

• 😢 难过（忧郁蓝色）
• 😠 生气（炽热红色）
• 😴 蒙圈（神秘紫色）
• 😄 开心（明亮黄色）
• 😌 平静（治愈绿色）
• 😍 兴奋（浪漫粉色）
• 🤒 不适（中性蓝色）

2. 日历展示

每个月打开，都能看到：

• 标注了情绪的日期像彩色贴纸
• 没记录的日期保持空白，等待填写
• 点击任何一天，都能修改或清除情绪

3. 数据统计

月末最喜欢的功能——情绪报告：

• 这个月开心了多少天？
• 是不是工作周容易疲惫？
• 哪些事情触发了兴奋情绪？

🌟 代码亮点：最喜欢的几个功能

1. 一键切换月份

翻看上个月的情绪地图，就像翻阅日记

// 轻轻一点，时光倒流prevMonthBtn.addEventListener('click', () => {    calendar.currentDate.setMonth(calendar.currentDate.getMonth() - 1);    calendar.renderCalendar();});

2. 情绪颜色编码

每种情绪都有自己的“主题色”，日历变得像彩虹

.mood-btn[data-mood="happy"]:hover {     background: #fed7d7;     border-color: #fc8181; }

3. 数据持久化

关闭浏览器再打开，情绪记录还在那里

saveMoodData() {    localStorage.setItem('moodCalendarData', JSON.stringify(this.moodData));}

💭 使用感受：不仅仅是记录工具

情绪变得“可管理”

以前情绪来了就来了，走了就走了。现在能看到它的“足迹”，反而学会了和情绪相处。

发现自己的情绪模式

原来我每个月都有那么几天特别容易😌平静，适合独处和思考。

减少了情绪内耗

看到日历上那么多😊开心的日子，突然觉得偶尔的😢难过也没什么大不了。

🚀 你也可以拥有！

如果你也想试试（不管会不会代码），我做了几个版本：

🌱 小白版：直接保存上面的代码为HTML文件，用浏览器打开就能用！

🎨 定制版：可以修改moodConfig，添加你自己的情绪类型：

const moodConfig = {    anxious: { emoji: '😰', text: '焦虑', color: '#d69e2e' },    grateful: { emoji: '🙏', text: '感恩', color: '#38a169' },    // 添加你的专属情绪...};

📱 情侣版：稍微改造一下，就能变成“双人心情日历”，看看两个人的情绪有没有默契！

完整代码地址

https://www.yuque.com/hl1012/lrxex9/wqlwgnuoyvblzk8x?singleDoc# 《心情日历表》

🌈 写在最后：情绪值得被温柔对待

这个月最后一天，我看着填满情绪的日历，突然很感动。每一个表情背后，都是一天的生活、一次心跳、一个故事。

情绪没有好坏，只有存在。 记录情绪，不是为了评判自己，而是为了更懂自己。

也许下个月，我的日历会有更多😊开心。也许不会。但无论如何，我都会温柔地记录它，就像记录一朵花的盛开与凋零。