js鼠标单击点亮灯泡切换代码是一款灯泡默认是熄灭状态,当鼠标点击后,灯泡点亮,并提示让关灯。
时间: 2023-09-04 22:08:34 浏览: 65
以下是一个简单的实现代码:
HTML部分:
```html
<div id="bulb" class="off" onclick="toggleBulb()"></div>
```
CSS部分:
```css
#bulb {
width: 50px;
height: 50px;
background-color: gray;
border-radius: 50%;
cursor: pointer;
}
.on {
background-color: yellow;
}
```
JS部分:
```javascript
function toggleBulb() {
var bulb = document.getElementById("bulb");
if (bulb.classList.contains("on")) {
bulb.classList.remove("on");
bulb.innerText = "点亮";
} else {
bulb.classList.add("on");
bulb.innerText = "关灯";
}
}
```
注释:
- 在 HTML 中,我们使用一个 `div` 元素表示灯泡,并设置其 `id` 属性为 `bulb`。
- 在 CSS 中,我们设置灯泡默认的样式为 `gray` 的背景色,并设置 `border-radius` 为 `50%` 使其呈圆形。同时设置 `cursor: pointer` 让鼠标悬浮在灯泡上时变为手型。
- 在 JS 中,我们定义了一个 `toggleBulb` 函数,当灯泡被点击时调用该函数。首先通过 `document.getElementById` 获取到灯泡元素,然后判断当前灯泡是否处于开启状态(即是否包含 `on` 类名)。如果是,则移除 `on` 类名,同时将灯泡的文本内容设置为“点亮”。如果不是,则添加 `on` 类名,同时将灯泡的文本内容设置为“关灯”。