JavaScript 点击灯泡开关
首先导入两张照片:
方法一:
<img src="./img/1.gif" alt="" onclick="toggle()" id="bulb">
<script>
var bulbImg = document.getElementById('bulb');
// 记录灯泡的状态, on = true 的时候是打开
var on = false;
// 方法一:
function toggle() {
console.log(bulbImg.src);
if (on == true) {
// 关闭
bulbImg.src = "./img/1.gif";
// on = false;
} else {
// 打开
bulbImg.src = "./img/2.gif";
// on = true;
}
// 取反
on = !on;
}
</script>
如图所示:
原始状态:
点击点亮灯泡:
再次点击灯泡熄灭:
方法二:
<img src="./img/1.gif" alt="" onclick="toggle()" id="bulb">
<script>
function _toggle() {
bulbImg.src = on == true ? "./img/1.gif" : "./img/2.gif";
// 上面的简化写法
// bulbImg.src = on ? "./img/1.gif" : "./img/2.gif";
on = !on;
}
</script>
效果同上
方法三:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title></title>
<style>
#light {
position: relative;
}
.img2 {
position: absolute;
top:0px;
left: 0px;
}
.img1 {
position: absolute;
top:0px;
left: 0px;
}
</style>
</head>
<body>
<div id="light" >
<img src="img/1.gif" alt="" class="img1" onclick="bright1()">
<img src="img/2.gif" alt="" class="img2" onclick="bright2()">
</div>
<script>
var light = document.getElementById('light');
var img1 = document.getElementsByClassName('img1')[0];
var img2 = document.getElementsByClassName('img2')[0];
console.log(img1);
img2.style.display = "none";
function bright1() {
if (img1.style.display = "none") {
img2.style.display = "block";
}
}
function bright2() {
if (img1.style.display = "block") {
img2.style.display = "none";
}
}
</script>
</body>
</html>
效果同上