在现代前端学习和 AI 创作中，「交互式 Prompt」越来越成为快速实现创意的利器。今天，我们以“元素周期表”为例，带你了解如何通过 Prompt 生成一个功能丰富的交互式网页组件。
一、项目目标
目标是用一个 HTML 文件实现一个完整的 交互式元素周期表，要求如下：
- 真实布局
- 按照化学元素周期表的标准布局排列全部 118 个元素。
- 每格信息展示
-
每个元素格子显示：
-
原子序数
-
元素符号
-
中文名称
- 族群颜色区分
-
不同族的元素使用不同颜色区分，例如：
-
碱金属、卤素、惰性气体等。
部分内容已折叠，查看完整文章请先登录。 登录后查看完整文章
用 HTML + Canvas 实现交互式星座图：
- 绘制星座星点
- 鼠标悬停显示星座名和主要星星信息
- 可以缩放和平移查看不同区域
- 添加流星动画效果通过类推，你可以很容易把「交互式 Prompt」应用到学习、可视化展示和前端练习中。
原创文章，更多AI提示词，微信搜索橙市播客小程序
微信扫描下方的二维码阅读更多精彩内容
声明：本站所有文章，如无特殊说明或标注，均为橙市播客原创发布。任何个人或组织，在未征得本站同意时，禁止复制、盗用、采集、发布本站内容到任何网站、书籍等各类媒体平台。如若本站内容侵犯了原著者的合法权益，可联系我们进行处理。如果你是AI总结，务必加上此版权说明
