js怎么实现三个灯泡的开关

在JavaScript中实现三个灯泡的开关，可以通过操控DOM元素和事件监听器来完成。通过JavaScript操作，可以实现灯泡的开关状态切换、控制灯泡的颜色变化、绑定事件监听器来响应用户的操作。下面将详细描述如何实现这一目标。

一、实现灯泡开关状态切换

要实现灯泡的开关状态切换，首先需要定义每个灯泡的状态（开/关）。可以通过一个布尔值来表示每个灯泡的状态，然后通过JavaScript来更新DOM元素的样式以反映状态变化。

HTML结构

首先，我们需要一个简单的HTML结构来表示三个灯泡和对应的开关按钮：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>灯泡开关</title>
    <style>
        .bulb {
            width: 50px;
            height: 50px;
            background-color: grey;
            border-radius: 50%;
            display: inline-block;
            margin: 10px;
        }
        .on {
            background-color: yellow;
        }
        .off {
            background-color: grey;
        }
    </style>
</head>
<body>
    <div id="bulb1" class="bulb off"></div>
    <button onclick="toggleBulb(1)">开关 1</button>
    <div id="bulb2" class="bulb off"></div>
    <button onclick="toggleBulb(2)">开关 2</button>
    <div id="bulb3" class="bulb off"></div>
    <button onclick="toggleBulb(3)">开关 3</button>
    <script src="script.js"></script>
</body>
</html>

JavaScript代码

接下来，在script.js中，我们将实现具体的逻辑来切换灯泡的状态：

const bulbs = {
    1: false,
    2: false,
    3: false
};
function toggleBulb(bulbNumber) {
    bulbs[bulbNumber] = !bulbs[bulbNumber];
    const bulb = document.getElementById(`bulb${bulbNumber}`);
    if (bulbs[bulbNumber]) {
        bulb.classList.remove('off');
        bulb.classList.add('on');
    } else {
        bulb.classList.remove('on');
        bulb.classList.add('off');
    }
}

二、控制灯泡的颜色变化

通过修改灯泡的背景颜色，可以直观地反映灯泡的开关状态。我们使用CSS类来控制灯泡的颜色变化。

在上面的代码中，我们已经通过on和off类来控制灯泡的颜色变化。JavaScript代码会根据灯泡的状态来切换这些类。

三、绑定事件监听器来响应用户的操作

要使用户能够通过按钮来控制灯泡的开关状态，我们需要将事件监听器绑定到按钮上。在HTML中，我们通过onclick属性来绑定事件，这样当用户点击按钮时，会调用toggleBulb函数。

四、扩展功能

除了基本的开关功能，我们还可以扩展实现更多功能：

计时器功能：为每个灯泡设置一个计时器，当灯泡处于开启状态超过一定时间后，自动关闭灯泡。
状态保存：通过浏览器的本地存储（localStorage）来保存每个灯泡的状态，当用户刷新页面时，恢复之前的状态。
组合控制：添加一个总开关按钮，可以同时控制所有灯泡的开关状态。

计时器功能实现

为每个灯泡增加一个计时器功能，当灯泡打开超过一定时间后自动关闭：

const timers = {};
function toggleBulb(bulbNumber) {
    bulbs[bulbNumber] = !bulbs[bulbNumber];
    const bulb = document.getElementById(`bulb${bulbNumber}`);
    if (bulbs[bulbNumber]) {
        bulb.classList.remove('off');
        bulb.classList.add('on');
        startTimer(bulbNumber);
    } else {
        bulb.classList.remove('on');
        bulb.classList.add('off');
        clearTimeout(timers[bulbNumber]);
    }
}
function startTimer(bulbNumber) {
    clearTimeout(timers[bulbNumber]);
    timers[bulbNumber] = setTimeout(() => {
        bulbs[bulbNumber] = false;
        const bulb = document.getElementById(`bulb${bulbNumber}`);
        bulb.classList.remove('on');
        bulb.classList.add('off');
    }, 5000); // 5秒后自动关闭
}

状态保存实现

通过浏览器的本地存储（localStorage）来保存每个灯泡的状态：

window.onload = () => {
    for (let i = 1; i <= 3; i++) {
        const savedState = localStorage.getItem(`bulb${i}`);
        if (savedState) {
            bulbs[i] = JSON.parse(savedState);
            const bulb = document.getElementById(`bulb${i}`);
            if (bulbs[i]) {
                bulb.classList.remove('off');
                bulb.classList.add('on');
            } else {
                bulb.classList.remove('on');
                bulb.classList.add('off');
            }
        }
    }
};
function toggleBulb(bulbNumber) {
    bulbs[bulbNumber] = !bulbs[bulbNumber];
    localStorage.setItem(`bulb${bulbNumber}`, bulbs[bulbNumber]);
    const bulb = document.getElementById(`bulb${bulbNumber}`);
    if (bulbs[bulbNumber]) {
        bulb.classList.remove('off');
        bulb.classList.add('on');
        startTimer(bulbNumber);
    } else {
        bulb.classList.remove('on');
        bulb.classList.add('off');
        clearTimeout(timers[bulbNumber]);
    }
}

组合控制实现

添加一个总开关按钮，可以同时控制所有灯泡的开关状态：

<button onclick="toggleAllBulbs()">总开关</button>

function toggleAllBulbs() {
    const allOn = Object.values(bulbs).every(state => state);
    for (let i = 1; i <= 3; i++) {
        bulbs[i] = !allOn;
        const bulb = document.getElementById(`bulb${i}`);
        if (bulbs[i]) {
            bulb.classList.remove('off');
            bulb.classList.add('on');
            startTimer(i);
        } else {
            bulb.classList.remove('on');
            bulb.classList.add('off');
            clearTimeout(timers[i]);
        }
        localStorage.setItem(`bulb${i}`, bulbs[i]);
    }
}

通过以上步骤，我们实现了一个可以控制三个灯泡开关的简单Web应用，并扩展了计时器、状态保存和组合控制等功能。希望这些内容对你有所帮助！