OpenVibeBETA

交互练习 · 第一步

做一个会前进的步骤条

点击上一页和下一页，让页面把进度变化清楚地表现出来。

打开原项目 先做第一个变化
看到第一个变化
10 分钟内
做出完整版本
75 分钟内
运行方式
下载 progress-steps 目录后直接打开 index.html
使用的积木
HTML / CSS / JavaScript

FIRST VISIBLE CHANGE

先做这一件事

把四个数字改成四个真实步骤名称，点击按钮确认仍能前进和后退。

三段路径 · 自动保存在本机

从第一个变化，到你的版本

0/ 3 步
0115 分钟
  1. 打开示例
  2. 点击前进与后退
  3. 替换步骤文字

做完的标志：你的四个步骤能依次高亮。

0245 分钟
  1. 修改完成颜色
  2. 在最后一步显示完成提示
  3. 限制首尾按钮状态

做完的标志：用户不会走出范围，并知道何时完成。

032 小时
  1. 选择一个报名或制作流程
  2. 为每步补一句说明
  3. 请朋友试走一遍

做完的标志：对方不需要解释就能完成整个流程。

AUTHORSHIP / 作者记录

作品可以请 AI 帮忙，这三件事由你亲自写。

记录只保存在这台设备，没有登录也能使用。

完成三步、署名并写下至少 10 个字的关键决定后可完成。

AI 协作提示词

让 AI 带路，不让它抢走决定

请陪我理解这个步骤条的 JavaScript。不要直接重写。先用生活语言解释 currentActive、按钮点击和 CSS active 类之间的关系，再帮我把四步替换成自己的流程，并一次只增加一个小功能。