元素周期表互动百科：点哪里，性质一眼看懂

背周期表最怕的是「记下一堆符号，却不知道它到底用来干嘛」。这个互动百科把 118 个元素按标准布局铺开，点击任意卡片弹窗给出原子序数、符号、中文名、原子量、分类、电子排布和一句话用途；还能按分类高亮、关键字搜索、切换深浅色。先看成品，再讲怎么用华为云 CodeArts 码道 WebUI 一段话把它做出来、部署上线。

这个工具做什么

它把「元素周期表」做成一个轻量互动百科：

• 完整 118 元素：标准 18 族布局，镧系、锕系单独成行，卡片上直接显示原子序数、符号、中文名和原子量。
• 点击看详情：弹窗一次给全原子序数、元素符号、中文名称、相对原子质量、分类、电子排布和主要用途。
• 分类高亮：碱金属、卤素、稀有气体等 11 类过滤，点一下同类元素亮起、其他变暗。
• 关键字搜索：按名称 / 符号 / 序数即时筛选，想找哪个直接打。
• 电子排布：按 Aufbau 顺序自动生成 1s² 2s² 2p⁶…，几十个周期元素都能查。
• 深浅色主题：一键切换，偏好写进 localStorage，下次打开记住。
• 响应式布局：手机、电脑都适配，移动端滚动查看完整周期表。

码道开通（免费体验版）

开始之前，先免费开通码道体验版。不需要装任何软件，浏览器就能用：

https://developer.huaweicloud.com/codeartsco.html?source=dmzntgwsf&sourcead=dmzntgwwbwz

开通后有三种使用方式：WebUI（浏览器对话）、TUI（终端命令行）和桌面 IDE（IDE 插件）。本文用 WebUI 版演示。

进入 AI 开发者空间

1. 浏览器打开 https://devstation.developer.huaweicloud.com/aidevspace?utm_source=opcsfsq&utm_medium=wbwz
2. 弹窗「请选择要进入的版本」→ 点击 体验版
3. 首次使用会跳到华为云登录页，扫码登录一次，后续浏览器会话复用
4. 弹窗「临时凭据自动配置」→ 点击 同意，沙箱自动创建

进入 AI 开发者空间主界面后，先等左侧菜单加载出来，再找到 CodeArts，点击它右侧的浏览器图标，打开码道 WebUI 对话窗口：

打开后码道 WebUI 会先和你打招呼，下方就是需求输入框：

小贴士：体验版沙箱 3 小时后自动重置，生成完记得把 index.html 下载保存。

任务描述

在码道 WebUI 输入框粘贴以下需求，回车发送：

开发一个「元素周期表互动百科」单文件网页应用：展示完整 118 个化学元素周期表，点击任意元素卡片弹窗显示原子序数、符号、中文名、原子量、分类、电子排布和一句话用途；支持按分类高亮、关键字搜索、深浅色主题，界面信息清晰美观，手机和电脑都能用，所有代码写在一个 index.html 里。完成后用部署功能部署成可访问的网页应用，生成一个公网可访问的分享链接，并告诉我访问地址。

这轮码道具体做了什么

不是复述通用 AI 能力，而是它在这次项目里的实际动作：

• 在 /workspace/periodic-table 下创建单文件 index.html，把 118 元素的百科数据、CSS Grid 布局、筛选搜索和详情弹窗全部写进一个文件，无第三方依赖。
• 探测空闲端口 3005 后启动 http.server 并自检 HTTP 200，给出内部预览地址。
• 用 DevBridge 创建公网隧道并验证返回的周期表内容，最后给出 8 小时有效的公网分享链接。

代码亮点

以下是 index.html 里值得关注的设计思路和实现细节。

1. 一个紧凑数组装完 118 个元素

每个元素是一条短对象，只存最关键的格子位置、分类和用途文案；点号按族、行号按周期直接写进 x / y：

const E=[
  {z:1,s:"H",n:"氢",m:"1.008",c:"nonmetal",x:1,y:1,u:"宇宙中最丰富的元素，用于合成氨、石油精炼与燃料电池"},
  {z:2,s:"He",n:"氦",m:"4.0026",c:"noble",x:18,y:1,u:"用于飞艇气球、超低温冷却与深潜呼吸混合气"},
  {z:3,s:"Li",n:"锂",m:"6.94",c:"alkali",x:1,y:2,u:"锂离子电池、轻质航空合金与心境稳定药物的核心元素"}
];

2. CSS Grid 布局直接把数据坐标贴进网格

卡片用 gridColumn / gridRow 精确落位，镧系、锕系用两个可点击占位符替代，点占位即可高亮对应类别：

const el=document.createElement("div");
el.className="el cat-"+e.c;
el.style.gridColumn=e.x;el.style.gridRow=e.y;
el.style.setProperty("--cat-color",CATS.find(c=>c.id===e.c).color);
el.innerHTML=`<span class="z">${e.z}</span><span class="sym">${e.s}</span><span class="nm">${e.n}</span><span class="ms">${e.m}</span>`;
el.title=`${e.n} (${e.s}) · 点击查看详情`;
el.addEventListener("click",()=>openModal(e));
table.appendChild(el);

3. 电子排布按 Aufbau 顺序自动生成

不用手写 118 条电子排布，只要有原子序数就能算：ORB 是轨道的填充顺序和容量，ec 从低到高逐个填满：

const ORB=[["1s",2],["2s",2],["2p",6],["3s",2],["3p",6],["4s",2],["3d",10],["4p",6],["5s",2],["4d",10],["5p",6],["6s",2],["4f",14],["5d",10],["6p",6],["7s",2],["5f",14],["6d",10],["7p",6]];
function ec(z){
  if(EX[z])return EX[z];
  let rem=z,parts=[];
  for(const [o,c] of ORB){if(rem<=0)break;const n=Math.min(c,rem);parts.push(o+sup(n));rem-=n;}
  return parts.join(" ");
}

对于少数不符合排布规律的过渡元素，再放进 EX 特例表里覆盖即可。

4. 弹窗把「是什么、排布、干什么」一次说清

openModal 把单条数据拆成清晰的详情面板，分类颜色做成渐变头部，电子排布和一句话用途固定展示：

function openModal(e){
  const color=CATS.find(c=>c.id===e.c).color;
  modal.innerHTML=`
    <div class="modal-head" style="background:linear-gradient(135deg,${color},${color}cc)">
      <button class="close" id="closeBtn" aria-label="关闭">×</button>
      <div class="big">${e.s}</div>
      <div class="zh">${e.n}</div>
      <div class="meta">原子序数 ${e.z} · ${CAT_NAME[e.c]} · 第${periodOf(e)}周期</div>
    </div>
    <div class="modal-body">
      <div class="info-row"><span class="k">电子排布</span><span class="v ec">${ec(e.z)}</span></div>
      <div class="use"><span class="ut">主要用途</span>${e.u}</div>
    </div>`;
  mask.classList.add("show");
}

直接下载试玩

本次生成的项目就是单文件 index.html，没有第三方依赖，把文件保存到本地后双击用浏览器打开即可运行。源码同步到公开 Demo Park 仓库：

• Demo Park 仓库：https://atomgit.com/deli007/demo_park
• 本案例目录：https://atomgit.com/deli007/demo_park/tree/main/codearts-periodic-table-explorer

总结

元素周期表互动百科用一条数组加 CSS Grid 就搭起了 118 个元素的完整棋盘：数据只存关键字段，电子排布按 Aufbau 顺序现场计算，分类高亮靠给卡片加 dim 类实现，详情则是把元素字段铺进一张弹窗。所有内容都是纯本地静态数据，不依赖接口。想继续扩展，可以给每个元素加沸点、熔点、发现年份，或加上「元素对比」和「测验挑战」模式。

如果还没用过码道，可以免费开通体验版：https://developer.huaweicloud.com/codeartsco.html?source=dmzntgwsf&sourcead=dmzntgwwbwz