交互练习 · 跟做练习
小学高段 · 9–12 岁建议成人支持家庭场景
做一个有昼夜主题的时钟
读取当前时间、旋转指针，再亲手决定白天和夜晚的视觉语言。
- 看到第一个变化
- 15 分钟内
- 做出完整版本
- 105 分钟内
- 运行方式
- 下载 theme-clock 目录后直接打开 index.html
- 使用的积木
- HTML / CSS / JavaScript / Date API
FIRST VISIBLE CHANGE
先做这一件事
修改明暗主题的主色和按钮文字，观察时钟保持正常走动。
CREATOR LOOP / 创造者六环
前五环长能力，最后一环长身份。
- 数学
- 艺术
- 信息科技
- 01问题
思考怎样让时间不只是数字，而能用颜色和语言帮助人理解一天的节奏。
- 02知识
理解时分秒与角度映射，观察时间区间怎样控制主题和问候。
- 03工具
修改 Date、映射与 CSS 变量，实现自己的昼夜视觉和时段规则。
- 04作品
完成一个实时走动、能切换主题并按时段显示问候的个人时钟。
- 05反馈
请家人在三个时段测试，确认指针、问候和颜色都容易理解。
- 06身份
能够说明自己怎样把数学规则变成视觉表达，并为可读性负责。
你必须亲自做
- 选择白天与夜晚的颜色和语言
- 亲自定义早中晚区间与每段问候
AI 可以帮助
- 解释时间数值怎样映射成角度
- 协助构造三个测试时间和检查状态条件
完成前要验证
- 亲自测试边界时间，并请一位家人确认文字与指针清楚
三段路径 · 自动保存在本机
从第一个变化，到你的版本
0/ 3 步
0115 分钟
- 观察秒针变化
- 找到 Date 读取逻辑
- 修改主题颜色
做完的标志：你能说清秒数如何对应旋转角度。
0245 分钟
- 选择两组颜色
- 修改切换按钮
- 检查文字对比度
做完的标志：两种主题都清晰并具有不同气质。
032 小时
- 定义早中晚时段
- 显示不同问候
- 测试三个时间输入
做完的标志：页面会根据时间给出正确问候。
AI 协作提示词
让 AI 带路，不让它抢走决定
请把 theme-clock 中 Date、map 和 transform 的关系解释成“时间刻度转成角度”。先不要改代码。等我选好白天与夜晚配色后，再帮我加入早中晚问候，并给我三个可验证的测试时间。