这是我参与11月更文挑战的第4天，活动详情查看：2021最后一次更文挑战
直接进入本文正题，这篇文章利用javascript实现电影票选座的特效，let us继续往下看吧。
一、HTML布局
实现设计好相关需要的区域，html布局如下：
1、座位标签区域
2、屏幕中央区域
布局核心html代码如下：
<div class="ticketselect">
<div class="seats">
<div class="seat"></div>
<div class="seat"></div>
<div class="seat"></div>
<div class="seat"></div>
<div class="seat"></div>
<div class="seat"></div>
<div class="seat"></div>
<div class="seat"></div>
<div class="seat"></div>
<div class="seat"></div>
<div class="seat"></div>
<div class="seat"></div>
</div>
<div class="screen">屏幕中央</div>
</div>
二、CSS样式
因为主要是为了练习一下javascript的代码，html布局的样式信息怎么方便怎么来，样式如下：
电影院座位没有被占用的样式如下图：
电影院座位已经被占用的样式如下图：
加完样式信息后的布局如下图：
三、Javascript特效
1、选座这个特效核心就是如何控制和展示座位被占用或取消占用，所以首先通过类名获取每个座位的标签列表，获取代码如下：
let seat = document.getElementsByClassName("seat");
2、为每个作为标签对象设置鼠标点击响应事件。该特效主要是通过对座位标签的样式切换来展示座位被占用或取消占用，当鼠标点击前的类名为"seat"是，将类名改变为"selected"，并更改座位标签内文本为"已占"，反之也是类似的。
for (let i = 0; i < seat.length; i++) {
seat.index = i;
seat[i].addEventListener("click", function() {
let classname = this.className;
console.log(classname == "seat");
if (classname == "seat") {
this.className = "selected";
this.innerText = "已占"
} else {
this.className = "seat";
this.innerText = ""
}
console.log(this.className);
})
}
至此，电影票选座特效就完成啦！撒花，嘻嘻嘻★,°:.☆(￣▽￣)/$: .°★ 。
