B100 · 做一个按钮页面

这是根据教师 JSON 自动生成的可视化查看页，左边快速扫读，右边直接看作品预览。

基础信息

主能力标签

表达构建

任务类型标签

游戏机制

喜欢做项目需要明确目标

掌握基础的 JavaScript 点击事件绑定

理解 HTML/CSS/JS 三者如何协作完成交互

学习利用 CSS Class 切换来实现视觉变化

卡点学生容易漏写 onclick 属性中的括号，导致函数不执行。解决方案提示学生检查 onclick="handleClick()" 是否完整，特别是后面的小括号。

卡点CSS 选择器写错，导致点击后 Class 切换了但样式没变。解决方案引导学生检查 .active 类的作用范围，确保它写在了正确的选择器之后。

尝试添加 transition 实现颜色的平滑过渡效果

加入 transform: scale() 实现点击时的弹跳动画

尝试添加 audio 标签，实现点击时的音效反馈

尝试制作一个“灯泡”页面，点击按钮可以让灯泡发光或者熄灭。