当前位置：首页 > JavaScript

js实现开灯

2026-04-06 08:39:47JavaScript

实现开关灯效果

使用JavaScript实现开关灯效果可以通过操作DOM元素的样式或类名来完成。以下是几种常见的方法：

通过切换背景颜色

创建一个按钮，点击时切换页面的背景颜色：

const button = document.getElementById('toggleButton');
let isLightOn = false;

button.addEventListener('click', function() {
    isLightOn = !isLightOn;
    document.body.style.backgroundColor = isLightOn ? 'yellow' : 'black';
    button.textContent = isLightOn ? '关灯' : '开灯';
});

对应的HTML部分：

js实现开灯

<button id="toggleButton">开灯</button>

通过CSS类切换

定义两种样式类，通过切换类名实现效果：

.light-on {
    background-color: yellow;
}
.light-off {
    background-color: black;
}

JavaScript部分：

js实现开灯

document.getElementById('toggleButton').addEventListener('click', function() {
    document.body.classList.toggle('light-on');
    document.body.classList.toggle('light-off');
    this.textContent = document.body.classList.contains('light-on') ? '关灯' : '开灯';
});

使用图片模拟灯泡

如果需要更真实的灯泡效果，可以使用图片切换：

const bulb = document.getElementById('bulb');
const switchBtn = document.getElementById('switch');

switchBtn.addEventListener('click', function() {
    const isOn = bulb.src.includes('on');
    bulb.src = isOn ? 'bulb-off.png' : 'bulb-on.png';
    switchBtn.textContent = isOn ? '开灯' : '关灯';
});

HTML部分：

<img id="bulb" src="bulb-off.png">
<button id="switch">开灯</button>

添加动画效果

如果需要更平滑的过渡效果，可以添加CSS过渡属性：

body {
    transition: background-color 0.5s ease;
}

完整示例代码

<!DOCTYPE html>
<html>
<head>
    <style>
        body {
            transition: background-color 0.5s ease;
        }
        .light-on {
            background-color: yellow;
        }
        .light-off {
            background-color: black;
        }
    </style>
</head>
<body class="light-off">
    <button id="toggleBtn">开灯</button>

    <script>
        document.getElementById('toggleBtn').addEventListener('click', function() {
            document.body.classList.toggle('light-on');
            document.body.classList.toggle('light-off');
            this.textContent = document.body.classList.contains('light-on') ? '关灯' : '开灯';
        });
    </script>
</body>
</html>

这些方法可以根据实际需求选择使用，简单的颜色切换适合快速实现，而图片切换则能提供更真实的视觉效果。动画过渡可以提升用户体验。