JavaScript · 交互行为

点击、切换、弹窗——让静态页面动起来。三步上手。

第 1 步

按钮点击

最基础的就是：点按钮，发生点什么。

按钮实验

onclick="..." = 点击时执行 JS alert('...') = 弹出提示框
💡 试试看：改 alert 里的文字。

<script> 里的内容会被浏览器「记住」，点了按钮才执行。这叫事件驱动。

第 2 步

JS 的核心公式：找到元素 → 对它做点什么。

文字修改实验

document.getElementById('xxx') = 找到 id 为 xxx 的元素
.textContent = '...' = 改文字 .style.color = '...' = 改颜色
💡 试试看：把 'S级' 改成你OC世界的权限名。

第 3 步

OC 站最常见的交互：点一下展开详情，再点一下收起。

档案面板

display: none = 隐藏 display: block = 显示
if (条件) { } else { } = 如果...就...否则...
💡 试试看：把档案内容换成你OC的设定。

✅ onclick 响应点击 ✅ getElementById 找到元素 ✅ textContent 改文字 ✅ display 切换显隐 ✅ if/else 做开关

有了这三样——点击响应 + 内容修改 + 显示切换——你就可以做一个有交互的 OC 页面了。