Java教程
JAVAScript 灯泡（开关，图片转换）
方案一 单按钮（开 / 关）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>修改灯泡</title>
<style>
img{
width: 200px;
height: 300px;
}
</style>
</head>
<body>
<img src="../images/dark.jpg" alt="">
<button>开灯</button>
<script>
var img = document.getElementsByTagName('img')[0];
var btn = document.getElementsByTagName('button')[0];
var tag = true;
btn.onclick = function () {
if (tag) {
img.src = '../images/bright.jpg';
btn.innerText = '关灯';
} else {
img.src = '../images/dark.jpg';
btn.innerText = '开灯';
}
tag = !tag;
}
</script>
</body>
</html>
方案二 双按钮（开 关）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>灯泡</title>
</head>
<body>
<div class="box">
<img src="../images/bark.jpg" alt="">
<button>开</button>
<button>关</button>
</div>
<script>
var box_img = document.getElementsByClassName('box')[0].getElementsByTagName("img")[0];
var box_btn = document.getElementsByClassName('box')[0].getElementsByTagName("button");
box_btn[0].onclick = function () {
box_img["src"] = "../images/light.jpg";
}
box_btn[1].onclick = function () {
box_img.src = "../images/bark.jpg";
}
</script>
</body>
</html>
-
RabbitMQ教程：新手入门指南11-20
-
Redis教程：新手入门指南11-20
-
SaToken教程：新手入门指南11-20
-
SpringBoot教程：从入门到实践11-20
-
Java全栈教程：从入门到实战11-20
-
Java微服务系统教程：入门与实践指南11-20
-
Less教程：初学者快速上手指南11-20
-
MyBatis教程：新手快速入门指南11-20
-
QLExpress教程：初学者快速入门指南11-20
-
订单系统教程：从入门到实践的全面指南11-20
-
负载均衡教程：新手入门必备指南11-20
-
微信支付教程：新手入门必备指南11-20
-
系统部署教程：轻松入门与实践11-20
-
入门级中间件教程：轻松掌握中间件基础知识11-20
-
Elmentplus教程：入门到实践指南11-20
