电影票选座HTML页面

以下是一个简单的电影票选座的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。它显示一个座位图，用户可以点击座位来选择它们，还有一个已选座位列表和一个购买按钮。当用户点击购买按钮时，页面将显示一个确认框，让用户确认购买，如果用户确认购买，座位将被标记为已售出并清除已选座位列表。

posted @ 2023-03-31 16:53  根号三先生  阅读(298)  评论(0)  编辑  收藏  举报