【新春创造营】马年春节年味时辰钟
项目简介
「马年春节・年味时辰钟」是一个融合传统十二时辰文化与马年春节民俗的交互式网页应用。用户可以通过点击时钟上的十二时辰刻度，探索北方、南方、西北三大地域的特色年俗文化，感受中华传统文化的魅力。
技术栈： HTML + CSS + JavaScript（纯前端实现）
使用到的 iFlow CLI 功能
本次开发主要使用了以下 iFlow CLI 工具：
| 功能 | 说明 |
|---|---|
read_file |
读取 HTML 文件，分析代码结构和现有功能 |
replace |
修复代码问题，更新时辰标记的 HTML 和 CSS |
run_shell_command |
验证修复结果，执行 Python 脚本检查文件状态 |
实现过程
1. 项目结构分析
使用 read_file 工具读取 index.html，分析现有代码：
-
整体采用深红色调的春节主题配色
-
包含时钟组件、地域切换按钮、民俗展示区
-
已定义完整的十二时辰民俗数据（north/south/northwest）
2. 问题定位与修复
在代码审查中发现以下问题：
-
时辰标记缺少
data-hour属性，导致点击交互失效 -
CSS 选择器与 HTML 类名不匹配
-
存在多余的嵌套
clock-container元素
3. 代码修复
通过 replace 工具进行了以下优化：
HTML 修复：
<!-- 修复后的时辰标记结构 -->
<div class="hour-marker zi" data-hour="zi">
<span class="label">子</span>
</div>
<div class="hour-marker wu wu-hour" data-hour="wu">
<span class="label">午</span>
</div>
CSS 修复：
/* 使用更精确的选择器 */
.hour-marker.zi {
position: absolute;
top: 5%;
left: 50%;
transform: translateX(-50%);
}
4. 功能验证
使用 run_shell_command 执行 Python 脚本验证修复：
-
✓ data-hour 属性正确配置
-
✓ CSS 选择器与 HTML 类名匹配
-
✓ 十二时辰标记完整
项目亮点
视觉设计
-
深红色调 + 金色点缀的春节主题配色
-
径向渐变背景营造节日氛围
-
时钟边缘多层边框设计，模拟传统铜钟质感
十二时辰交互
-
子、丑、寅、卯、辰、巳、午、未、申、酉、戌、亥
-
12个时辰刻度均匀分布在钟面上
-
点击高亮显示，实时更新民俗内容
三大地域文化
| 地域 | 特色民俗示例 |
|---|---|
| 北方 | 熬年守岁、舞龙拜年、马队送福 |
| 南方 | 广州花市、潮汕英歌舞、江南跑马灯 |
| 西北 | 丝路守岁、敦煌飞天舞、草原马术 |
彩蛋动画
-
点击「午时」触发「马到成功」特别动画
-
骏马奔腾 + 祝福语展示
页面截图
主界面
-
春节主题标题「马年春节・年味时辰钟」
-
地域切换按钮（北方/南方/西北）
-
走马灯装饰
-
十二时辰时钟
-
民俗展示卡片
交互效果
-
鼠标悬停：时辰刻度放大 + 金色光晕
-
点击时辰：更新下方民俗展示内容
-
午时彩蛋：全屏骏马奔腾动画
体验方式
总结
通过 iFlow CLI 工具高效完成了项目代码的审查与修复工作，确保了十二时辰交互功能的正常运行。项目将传统文化与现代 Web 技术相结合，让用户在交互中感受中国传统年俗文化的独特魅力。
「马年春节・年味时辰钟」- 探索十二时辰里的马年民俗风情