概述
<!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>
实现效果如下
最后
以上就是畅快黑米为你收集整理的js基础【开关灯】的全部内容，希望文章能够帮你解决js基础【开关灯】所遇到的程序开发问题。
如果觉得靠谱客网站的内容还不错，欢迎将靠谱客网站推荐给程序员好友。
发表评论 取消回复