首页js完成一个页面开关灯案例：点击按钮在浏览器页面切换黑白开关灯效果。

js完成一个页面开关灯案例：点击按钮在浏览器页面切换黑白开关灯效果。

时间: 2024-05-16 12:14:13 浏览: 101

可以尝试以下代码： ```html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>开关灯</title> <style> body { background-color: black; color: white; } .light-on { background-color: white; color: black; } </style> </head> <body> <h1>开关灯</h1> <button id="light-switch">开灯</button> <script> const lightSwitch = document.getElementById('light-switch'); const body = document.querySelector('body'); lightSwitch.addEventListener('click', function() { if (body.classList.contains('light-on')) { body.classList.remove('light-on'); lightSwitch.textContent = '开灯'; } else { body.classList.add('light-on'); lightSwitch.textContent = '关灯'; } }); </script> </body> </html> ``` 代码中，首先定义了一个黑色背景、白色字体的样式。然后创建一个按钮和一个脚本。脚本中，通过 `document.getElementById` 和 `document.querySelector` 获取到按钮和整个页面的 `body` 元素。然后给按钮添加一个点击事件监听器，当点击时判断 `body` 元素是否有 `light-on` 类。如果有，就移除它，同时将按钮文本设为“开灯”。如果没有，则添加它，同时将按钮文本设为“关灯”。最后切换黑白两种颜色的效果就完成了。

阅读全文