<!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>Document</title>
<style>
body{
background-color: black;
}
.lamp{
width: 100px;
height: 100px;
background-color: gray;
border-radius: 50%;
}
.btn{
width: 80px;
height: 30px;
background-color: rgb(93, 58, 250);
text-align: center;
line-height: 30px;
border-radius: 5px;
margin-left: 10px;
box-shadow: 1px 1px 10px gray;
}
</style>
</head>
<body id="body">
<div id="lamp" class="lamp"></div>
<div id="btn" class="btn">開燈</div>
<script>
var btn = document.getElementById('btn');
var body = document.getElementById('body');
var lamp = document.getElementById('lamp');
btn.onclick = function(){
if(btn.innerHTML == "開燈"){
body.style.backgroundColor = "#fff";
lamp.style.backgroundColor = "yellow";
btn.innerHTML = "關燈";
}else{
body.style.backgroundColor = "black";
lamp.style.backgroundColor = "#333";
btn.innerHTML = "開燈";
}
}
</script>
</body>
</html>
實現效果如下
