本文介绍了一个简单的网页交互效果实现：通过HTML、CSS和JavaScript创建一个可以开关的虚拟灯光。当点击按钮时，背景颜色和灯泡的颜色会发生变化，模拟开灯和关灯的效果。
<!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>
实现效果如下
扫一扫
650
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
