如何通过JS脚本触发CSS :active状态实现Simon Says游戏按钮点击效果

原生的:active伪类是浏览器控制的交互状态，仅能由用户真实点击操作触发，JS无法直接唤起该状态，你可以用以下两种替代方案实现完全相同的视觉效果：

• 方案1：新增同名样式类（更推荐，易维护）
  将你的CSS代码调整为同时匹配:active伪类和自定义.active类：

.but:active, .but.active {
  box-shadow: 0 5px #666;
  transform: translateY(4px);
}

需要模拟点击效果时，用JS操作类名即可，示例代码如下：

// 获取目标按钮元素
const targetBtn = document.querySelector('.but');
// 模拟按下状态，添加active类
targetBtn.classList.add('active');
// 300ms后模拟松开，移除active类，时长可根据需求调整
setTimeout(() => {
  targetBtn.classList.remove('active');
}, 300);

• 方案2：直接操作内联样式（无需修改CSS）
  如果你不想改动原有CSS代码，也可以直接用JS给按钮添加内联样式实现效果：

const targetBtn = document.querySelector('.but');
// 模拟按下
targetBtn.style.boxShadow = '0 5px #666';
targetBtn.style.transform = 'translateY(4px)';
// 模拟松开
setTimeout(() => {
  targetBtn.style.boxShadow = '';
  targetBtn.style.transform = '';
}, 300);

以上两种方案都可以完美适配Simon Says游戏的序列展示需求，你只需要按序列顺序依次给对应颜色按钮执行上述逻辑即可。

内容的提问来源于stack exchange，提问作者Dor Iluz