如何用JSjQuery制作一个基础的开关灯功能示例？

本文共计492个文字，预计阅读时间需要2分钟。

本文实例讲述了如何使用JS/jQuery实现简单的开关灯效果。分享给广大读者参考，具体如下：

实现效果：结构只有两个按钮标签button id=left 开灯 / buttonbutton id=right 关灯 / button

方法一：使用原生JS

1.为两个按钮分别绑定点击事件

2.根据按钮的id判断是开灯还是关灯

3.通过修改body的背景颜色实现开关灯效果

代码示例：

javascript// 为左按钮绑定点击事件document.getElementById('left').addEventListener('click', function() { document.body.style.backgroundColor='yellow'; // 开灯});

// 为右按钮绑定点击事件document.getElementById('right').addEventListener('click', function() { document.body.style.backgroundColor='white'; // 关灯});

本文实例讲述了JS/jQuery实现简单的开关灯效果。