以下是一个简单的电影票选座的HTML页面示例：
<!DOCTYPE html>
<html>
<head>
<title>电影票选座</title>
<style>
/* 样式表 */
.seat {
background-color: green;
color: white;
padding: 10px;
margin: 5px;
border-radius: 5px;
cursor: pointer;
}
.seat.selected {
background-color: red;
}
</style>
</head>
<body>
<h1>电影票选座</h1>
<p>请选择您要购买的座位：</p>
<div id="seats">
<!-- 座位区域 -->
</div>
<p>您选择的座位是：</p>
<div id="selected-seats">
<!-- 已选座位区域 -->
</div>
<button id="buy-button">购买</button>
<script>
// JavaScript 代码
var seats = [
[1, 2, 3, 4, 5, 6, 7, 8],
[9, 10, 11, 12, 13, 14, 15, 16],
[17, 18, 19, 20, 21, 22, 23, 24],
[25, 26, 27, 28, 29, 30, 31, 32],
[33, 34, 35, 36, 37, 38, 39, 40],
];
var selectedSeats = [];
function toggleSeat(row, col) {
var seat = document.getElementById("seat-" + row + "-" + col);
if (selectedSeats.includes(seat)) {
// 座位已经被选择，取消选择
selectedSeats = selectedSeats.filter(function (s) {
return s != seat;
});
seat.classList.remove("selected");
} else {
// 选择座位
selectedSeats.push(seat);
seat.classList.add("selected");
}
updateSelectedSeats();
}
function updateSelectedSeats() {
// 更新已选座位
var selectedSeatsDiv = document.getElementById("selected-seats");
selectedSeatsDiv.innerHTML = "";
if (selectedSeats.length == 0) {
selectedSeatsDiv.innerHTML = "您还未选择座位";
} else {
selectedSeatsDiv.innerHTML = "您选择的座位是：";
for (var i = 0; i < selectedSeats.length; i++) {
selectedSeatsDiv.innerHTML +=
selectedSeats[i].getAttribute("data-seat") + " ";
}
}
}
// 创建座位图
var seatsDiv = document.getElementById("seats");
for (var i = 0; i < seats.length; i++) {
var row = document.createElement("div");
for (var j = 0; j < seats[i].length; j++) {
var seat = document.createElement("span");
seat.innerHTML = seats[i][j];
seat.classList.add("seat");
seat.setAttribute("data-row", i + 1);
seat.setAttribute("data-col", j + 1);
seat.setAttribute("data-seat", "第" + (i + 1) + "排第" + (j + 1) + "座");
seat.setAttribute("id", "seat-" + (i + 1) + "-" + (j + 1));
seat.onclick = function () {
var row = this.getAttribute("data-row");
var col = this.getAttribute("data-col");
toggleSeat(row, col);
};
row.appendChild(seat);
}
seatsDiv.appendChild(row);
}
// 购买按钮点击事件
var buyButton = document.getElementById("buy-button");
buyButton.onclick = function () {
if (selectedSeats.length == 0) {
alert("请选择座位");
} else {
var confirmMsg = "您选择的座位是：\n";
for (var i = 0; i < selectedSeats.length; i++) {
confirmMsg +=
selectedSeats[i].getAttribute("data-seat") + "\n";
}
confirmMsg += "是否确认购买？";
if (confirm(confirmMsg)) {
alert("购买成功！");
selectedSeats.forEach(function (s) {
s.classList.remove("selected");
});
selectedSeats = [];
updateSelectedSeats();
}
}
};
</script>
</body>
</html>
这个页面使用了HTML、CSS和JavaScript。它显示一个座位图，用户可以点击座位来选择它们，还有一个已选座位列表和一个购买按钮。当用户点击购买按钮时，页面将显示一个确认框，让用户确认购买，如果用户确认购买，座位将被标记为已售出并清除已选座位列表。
标签：selectedSeats,HTML,seat,票选,var,座位,row,data,页面 From： https://www.cnblogs.com/sin3degree/p/17276796.html