用专家版DeepSeek做课件,课堂气氛拉满

先看效果流程

在课堂上打开这个互动课件就可以看到

左侧是工具栏，右侧是流程图

在左边工具栏设有七个选项，将这七个选项拖入右侧流程图对应的地方。

拖入完成后原本的虚线框就会变成实线，线段上面还有是/否能够更直观的给出判断

在下方会有一个执行流程，输入用户名和密码后，点击执行就能开始登录算法流程

输入默认用户名和密码，算法会判断出登录成功

输入其他用户名或密码，算法会判断出登录失败

操作流程非常简单，只需几步就可以轻松搞定！

不会写代码咋做？

这看起来有些复杂？需要代码？

No！操作方法和步骤非常简单，只需三步完成即可完成！

1.打开我们的 DeepSeek

2.选择专家模式

更容易一次给出完整可运行的网页代码哦～

3.输入提示词

提示词

请为我创建一个用于教学的“登录模块算法流程图”交互式HTML页面。要求功能完整、视觉现代，并支持拖拽拼图与动态执行演示。具体需求如下：

### 一、整体布局与风格
- 页面背景使用浅色渐变（如 #f5f7fa 到 #e4e8f0），顶部显示标题“登录模块算法流程图教学工具”。
- 主体为白色卡片式容器，宽度约1100px，带圆角和大阴影，内部采用左右分栏布局。
- 左侧边栏宽度约280px，背景为浅灰色（#f8f9fa），标题为“流程框”，用于放置所有可拖拽的流程图元。
- 右侧主区域分为三部分：顶部标签页（切换流程图结构）、中间画布区域（放置区 + 连线）、底部控制面板（输入账号密码、执行按钮、提示信息）。

### 二、流程图元数据（左侧边栏）
- 提供以下图元，每个图元均需可拖拽（draggable），并具有特定形状和文字：
  1. 开始/结束：圆角矩形（rx=15），文字“开始”或“结束”，尺寸100x44。
  2. 输入/输出：平行四边形（通过 polygon 实现），文字如“输入用户名”“输入密码”“输出登录成功”“输出用户名错误”“输出密码错误”“输出用户名或密码错误”，尺寸140x44 或 180x44。
  3. 判断：菱形，文字如“用户名和密码是否正确”“用户名是否正确”“密码是否正确”，尺寸170x64 或 140x64。
- 所有图元默认填充淡黄色（#fff9c4），边框深色，带有轻微阴影，鼠标悬停有上浮效果。

### 三、两种流程图模式（通过标签页切换）
**方法1：双分支结构流程图（默认）**
- 包含的图元ID：start, in_user, in_pass, cond_both, succ, err_both, end。
- 放置区（Drop Zones）共7个，位置固定（例如：起始(150,40)，输入用户名(150,110)，输入密码(150,180)，判断(150,270)，成功(150,360)，错误(420,360)，结束(150,450)）。
- 连线逻辑：
  - 垂直主线：开始 → 输入用户名 → 输入密码 → 判断。
  - 判断“是”分支向下到“输出登录成功”，然后向下到“结束”。
  - 判断“否”分支向右到“输出用户名或密码错误”，然后折线向左下汇聚到“结束”。

**方法2：多分支结构流程图**
- 包含的图元ID：start, in_user, in_pass, cond_user, cond_pass, succ, err_user, err_pass, end。
- 放置区共9个，位置固定（起始(150,40)，输入用户名(150,110)，输入密码(150,180)，判断用户名(150,270)，判断密码(150,360)，用户名错误(460,360)，成功(150,450)，密码错误(360,450)，结束(150,540)）。
- 连线逻辑：
  - 垂直主线：开始 → 输入用户名 → 输入密码 → 判断用户名。
  - 判断用户名“是”向下到判断密码；“否”向右到“输出用户名错误”，再折线向下汇聚。
  - 判断密码“是”向下到“输出登录成功”；“否”向右到“输出密码错误”，再折线向下汇聚。
  - 所有输出最终汇聚到“结束”。

### 四、拖拽交互与正确性验证
- 左侧图元可拖拽至右侧放置区。放置区以虚线框显示预期形状的轮廓。
- 每个放置区只能接受一个特定的图元（通过ID匹配）。如果用户将错误的图元拖入，该图元自动返回左侧边栏，并短暂显示红色提示“❌ 放置错误，请重新选择！”。
- 如果拖放正确，图元固定在放置区内，并显示绿色提示“✅ 放置正确！”。
- 只有当当前模式下所有放置区均放置了正确的图元时，才允许点击“执行流程”按钮；否则按钮可点但会提示需要先正确拼出流程图。

### 五、流程图连线绘制（静态）
- 使用 SVG 作为画布覆盖层（pointer-events: none），根据当前模式自动绘制带箭头的黑色连线。
- 箭头标记需定义在 `<defs>` 中。
- 在判断分支的连线上标注“是”或“否”文字。
- 连线应在每次切换模式或完成拖放后更新。

### 六、执行流程演示（动态）
- 底部控制面板包含两个输入框（用户名、密码）、“执行流程”按钮，以及一个消息显示区域。
- 默认正确账号提示文字：“默认正确账号 -> 用户名：guest，密码：123456”。
- 点击“执行流程”后：
  1. 根据当前流程图结构和用户输入，模拟执行路径。
  2. 显示一个红色箭头（小三角形），从“开始”块出发，沿连线路径逐步移动至终点。
  3. 移动过程中，经过的放置区内的图元会高亮（例如黄色边框或填充）。
  4. 移动路径用红色粗线实时绘制。
  5. 执行完毕后，在消息区显示最终结果（例如“执行完毕：输出登录成功”或相应的错误信息）。
- 具体判断逻辑：
  - **双分支模式**：若用户名==='guest'且密码==='123456'则走成功路径，否则走错误路径。
  - **多分支模式**：先判断用户名，若正确再判断密码；分别输出“用户名错误”、“密码错误”或“登录成功”。
- 执行期间“执行流程”按钮禁用，演示结束后恢复。

### 七、技术实现要求
- 纯HTML、CSS和原生JavaScript实现，不依赖任何外部库。
- 使用 Flexbox 进行布局。
- 拖拽使用原生 Drag and Drop API。
- 连线绘制使用 DOM 操作创建 SVG 元素。
- 动画使用 CSS transition 配合 Promise 和 setTimeout 实现顺序移动。
- 代码结构清晰，关键函数包括：模式切换、放置区渲染、连线更新、执行流程等。

### 八、视觉细节
- 所有按钮使用渐变蓝色背景，悬停有加深和上浮效果。
- 输入框有聚焦高亮。
- 画布区域带有点状网格背景。
- 提示信息区域使用合适的字体图标（如💡）和颜色区分成功/错误/提示状态。

等待生成后选择下载就能保存本地，选择运行就能预览。

一个登录模块算法流程图交互工具就做好了

操作简单，极易上手～

关注并私信回复：登录

即可免费获得完整版 html 网页，老师们快来留言吧~