当前位置：首页 > JavaScript

js实现灯泡

2026-04-07 03:56:52JavaScript

使用HTML和JavaScript实现灯泡效果

创建一个简单的灯泡效果可以通过HTML和JavaScript结合实现。以下是一个完整的示例代码：

<!DOCTYPE html>
<html>
<head>
    <title>JavaScript灯泡效果</title>
    <style>
        body {
            text-align: center;
            margin-top: 50px;
        }
        #bulb {
            width: 100px;
            height: 100px;
            border-radius: 50%;
            background-color: gray;
            margin: 20px auto;
        }
        button {
            padding: 10px 20px;
            font-size: 16px;
            cursor: pointer;
        }
    </style>
</head>
<body>
    <h1>JavaScript灯泡</h1>
    <div id="bulb"></div>
    <button onclick="toggleBulb()">开关灯泡</button>

    <script>
        let isOn = false;

        function toggleBulb() {
            const bulb = document.getElementById('bulb');
            isOn = !isOn;

            if(isOn) {
                bulb.style.backgroundColor = 'yellow';
                bulb.style.boxShadow = '0 0 20px yellow';
            } else {
                bulb.style.backgroundColor = 'gray';
                bulb.style.boxShadow = 'none';
            }
        }
    </script>
</body>
</html>

添加动画效果增强体验

可以通过CSS过渡为灯泡添加平滑的开关效果：

#bulb {
    transition: all 0.3s ease;
}

使用图片替代纯色灯泡

如果想使用真实的灯泡图片，可以修改代码：

<div id="bulb">
    <img src="bulb_off.png" id="bulbImage" width="100">
</div>

<script>
    function toggleBulb() {
        const bulbImage = document.getElementById('bulbImage');
        isOn = !isOn;
        bulbImage.src = isOn ? 'bulb_on.png' : 'bulb_off.png';
    }
</script>

添加键盘控制功能

扩展功能，使灯泡可以通过键盘空格键控制：

document.addEventListener('keydown', function(event) {
    if(event.code === 'Space') {
        toggleBulb();
        event.preventDefault();
    }
});

实现自动闪烁效果

添加自动闪烁功能：

js实现灯泡

let blinkInterval;

function startBlinking() {
    blinkInterval = setInterval(toggleBulb, 500);
}

function stopBlinking() {
    clearInterval(blinkInterval);
}

// 添加按钮调用这些函数

这些代码示例展示了如何使用JavaScript创建和控制灯泡效果，从基本的开关功能到更复杂的动画和交互功能。