电影票选座
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
*{
margin: 0;
padding: 0;
list-style: none;
}
.box{
width: 600px;
height: 420px;
border:5px solid #E1E1E1;
margin: 0 auto;
position: relative;
}
ul>li{
float: left;
width: 90px;
height: 60px;
background-color: #E1E1E1;
margin: 5px;
text-align: center;
line-height: 60px;
cursor: pointer;
}
.center{
margin: 0 auto;
width: 200px;
height: 60px;
position: absolute;
bottom: 7px;
left: 200px;
text-align: center;
line-height: 60px;
border:1px solid #E1E1E1;
}
.info::after{
font-size: 12px;
display: block;
height: 60px;
content: "该座位有人喽！";
background-color: aquamarine;
color: white;
}
</style>
<!-- 点击li进行选座 -->
<script type="text/javascript">
window.onload = ()=>{
//拿到全部的li
var lis = document.querySelectorAll("li");
var length = lis.length;
// for(let i = 0 ;i<length;i++){
// lis[i].onclick = ()=>{
// //判断有没有info，如果有就删除，如果没有就添加
// if(lis[i].className === "info"){
// lis[i].className ="";
// }else{
// lis[i].className ="info";
// }
// }
// }
// 方式二
for(var i = 0; i <length;i++){
lis[i].onclick = function(){
var res = this.getAttribute("class");
if(!res){
this.setAttribute("class","info")
}else{
this.setAttribute("class","");
}
}
}
}
</script>
</head>
<body>
<div class="box">
<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 class="center">屏幕中央</div>
</ul>
</div>
</body>
</html>
【推荐】国内首个AI IDE，深度理解中文开发场景，立即下载体验Trae
【推荐】编程新体验，更懂你的AI，立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包，你的智能百科全书，全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell：AI 加持，快人一步
· 被坑几百块钱后，我竟然真的恢复了删除的微信聊天记录！
· 没有Manus邀请码？试试免邀请码的MGX或者开源的OpenManus吧
· 【自荐】一款简洁、开源的在线白板工具 Drawnix
· 园子的第一款AI主题卫衣上架——"HELLO! HOW CAN I ASSIST YOU TODAY
· Docker 太简单，K8s 太复杂？w7panel 让容器管理更轻松！