在线选座位功能实现的示例代码
时间: 2023-08-18 13:03:50 浏览: 46
以下是一个简单的在线选座位功能的示例代码:
HTML:
```html
<div class="seat-map">
<div class="screen">屏幕</div>
<div class="seats">
<div class="seat-row">
<div class="seat unavailable"></div>
<div class="seat unavailable"></div>
<div class="seat"></div>
<div class="seat"></div>
<div class="seat"></div>
<div class="seat"></div>
</div>
<div class="seat-row">
<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="seat-row">
<div class="seat"></div>
<div class="seat"></div>
<div class="seat"></div>
<div class="seat unavailable"></div>
<div class="seat unavailable"></div>
<div class="seat"></div>
</div>
</div>
</div>
```
CSS:
```css
.seat-map {
margin: 20px;
font-size: 14px;
}
.screen {
text-align: center;
font-size: 20px;
font-weight: bold;
margin-bottom: 10px;
}
.seats {
display: flex;
flex-direction: column;
}
.seat-row {
display: flex;
justify-content: center;
align-items: center;
margin-bottom: 10px;
}
.seat {
width: 40px;
height: 40px;
border-radius: 5px;
margin-right: 10px;
background-color: #ccc;
cursor: pointer;
}
.unavailable {
background-color: #aaa;
cursor: not-allowed;
}
.selected {
background-color: blue;
}
```
JavaScript:
```javascript
const seats = document.querySelectorAll('.seat:not(.unavailable)');
seats.forEach((seat) => {
seat.addEventListener('click', () => {
if (seat.classList.contains('selected')) {
seat.classList.remove('selected');
} else {
seat.classList.add('selected');
}
});
});
```
这段代码实现了以下功能:
- 显示一个座位地图,包括屏幕和多排座位。
- 座位用带圆角的矩形表示,灰色表示未选座,浅灰色表示已选座但不可用,蓝色表示已选座且可用。
- 点击一个未选中的座位会将其标记为已选中,点击一个已选中的座位会将其取消选中。