1. 写一个按钮绑定JavaScript事件用来管理小灯的开关及颜色(小灯是一个圆形) 按下开关 小灯红色 再次按下 小灯绿色 再次按下 小灯蓝色 再次按下 小灯关闭 2.尝试两种方法(class与style)完成此案例
时间: 2024-09-16 08:00:54 浏览: 7
为了创建一个按钮控制小灯的颜色和状态,我们可以使用HTML、CSS和JavaScript来实现这个功能。以下是两种方法:
**方法一:使用Class (推荐)**
```html
<!DOCTYPE html>
<html lang="en">
<head>
<title>小灯切换</title>
<style>
.lamp {
width: 50px;
height: 50px;
border-radius: 50%;
display: inline-block;
background-color: off-white;
cursor: pointer;
}
.red-lamp { background-color: red; }
.green-lamp { background-color: green; }
.blue-lamp { background-color: blue; }
.off-lamp { visibility: hidden; }
</style>
</head>
<body>
<button id="light-switch">切换小灯</button>
<div class="lamp" id="color-lamp" style="background-color: red;"></div>
<script>
const lamp = document.getElementById('color-lamp');
const switchBtn = document.getElementById('light-switch');
switchBtn.addEventListener('click', function() {
if (lamp.classList.contains('off-lamp')) {
lamp.classList.remove('off-lamp');
} else {
lamp.classList.add('off-lamp');
}
lamp.classList.toggle('red-lamp'); // 红色 -> 绿色 -> 蓝色 -> 关闭
});
</script>
</body>
</html>
```
**方法二:直接修改CSS样式**
```html
<!DOCTYPE html>
<html lang="en">
<head>
<title>小灯切换</title>
<style>
#light-switch {
padding: 5px;
margin-bottom: 10px;
}
.lamp {
width: 50px;
height: 50px;
border-radius: 50%;
display: inline-block;
}
.lamp.red { background-color: red; }
.lamp.green { background-color: green; }
.lamp.blue { background-color: blue; }
.lamp.off { visibility: hidden; opacity: 0; }
</style>
</head>
<body>
<button id="light-switch">切换小灯</button>
<div class="lamp lamp-red"></div>
<script>
document.getElementById('light-switch').addEventListener('click', function() {
const lamp = document.querySelector('.lamp');
lamp.classList.remove('lamp-off');
['red', 'green', 'blue'].forEach(color => {
setTimeout(() => {
lamp.classList.add('lamp-' + color);
lamp.classList.add('lamp-off');
setTimeout(() => {
lamp.classList.remove('lamp-off');
}, 300); // 每次颜色变化停留半秒
}, 300); // 总共三个颜色变换间隔300毫秒
});
});
</script>
</body>
</html>
```
在这两个例子中,我们分别通过`class`和`style`属性来动态地改变小灯的颜色和隐藏状态。当点击按钮时,会切换颜色,并在最后一次切换后将小灯关闭。