代码思路

1.首先我们在一个空白页面创造一个按钮，按钮名称为：开关灯

2.获取按钮元素和body的元素

3.给按钮添加js效果

第一步：

先在创建按钮，按钮的名称为开关灯

代码如下：

效果如下:

第二步：

我们获取元素，我们使用.querySelector('')切记括号里面的元素一定要加单引号否者获取不到

第三步：

我们给按钮添加点击事件，因为我们的变换两次点第一次时候然背景变黑点第二次时候让背景变白，所以我们的思路是给body添加一个类名，在css中设置两种样式，让body的类名变换来实现开关灯的效果，因为我们需要变换两次所以我们需要创建一个变量，当让我们点击让这个变量跟着我们改变就能实现变换

代码如下：

效果如下：

当我们点击第一次的时候

当我们点击第二次的时候

这样就实习了好玩的开关灯效果！！

更多好玩的简单的小案例可以关注阿凡！希望能一起学习！