脚本宝典收集整理的这篇文章主要介绍了电影票选座，脚本宝典觉得挺不错的，现在分享给大家，也给大家做个参考。
<!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>
以上是脚本宝典为你收集整理的电影票选座全部内容，希望文章能够帮你解决电影票选座所遇到的问题。
本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。