<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
*{
margin: 0;
padding: 0;
}
ul{
width: 500px;
height: 400px;
border: 1px solid red;
position: fixed;
margin: 0 auto;
left: 0;
right: 0;
top: 50%;
transform: translate(0,-50%);
text-align: center;
display: flex;
flex-wrap: wrap;
justify-content: space-evenly;
align-items: center;
}
ul>li{
list-style: none;
width: 70px;
height: 40px;
font-size: 10px;
text-align: center;
line-height: 40px;
font-weight: bold;
color: #333;
background: #a19292;
border: 1px solid white;
display: inline-block;
align-content: center;
}
div{
width: 150px;
height: 100px;
border-left: 1px solid #a19292;
border-right: 1px solid #a19292;
box-shadow: #a19292;
line-height: 100px;
}
.click{
background-color: orange;
color: white;
}
</style>
</head>
<body>
<ul>
<li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li>
<li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li>
<li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li>
<div>屏幕*</div>
</ul>
<script>
var lis = document.getElementsByTagName('li');
for(var i = 0;i<lis.length;i++){
lis[i].onclick = function () {
let res = this.getAttribute('class');
if(!res){
let res = this.setAttribute('class','click')
this.innerHTML = '座位已被选'
}else{
let res = this.setAttribute('class','')
this.innerHTML = ''
}
}
}
</script>
</body>
</html>
