影厅座位图用js怎么写

影厅座位图用JS怎么写：使用HTML和CSS创建基础结构、使用JavaScript动态生成座位、实现座位状态切换、添加交互功能。在本文中，我们将详细讨论如何使用JavaScript创建一个动态的影厅座位图，并实现交互功能。重点在于如何通过代码实现座位的动态生成和状态切换。以下是详细步骤和实现方法。

一、使用HTML和CSS创建基础结构

创建影厅座位图的第一步是构建HTML和CSS的基础结构。这一步为后续的JavaScript操作提供必要的骨架。

1. 创建HTML结构

HTML结构是座位图的骨架，我们将定义一个容器来存放所有的座位。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>影厅座位图</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <div class="cinema">
        <div class="screen">屏幕</div>
        <div class="seats-container"></div>
    </div>
    <script src="script.js"></script>
</body>
</html>

2. 编写CSS样式

CSS样式用于美化座位图，使其更接近实际的影厅布局。

body {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    background-color: #f0f0f0;
    margin: 0;
}
.cinema {
    text-align: center;
}
.screen {
    background-color: #444;
    height: 50px;
    width: 100%;
    margin-bottom: 20px;
    color: white;
    line-height: 50px;
}
.seats-container {
    display: grid;
    grid-template-columns: repeat(10, 1fr);
    gap: 10px;
}
.seat {
    width: 40px;
    height: 40px;
    background-color: #ddd;
    border: 1px solid #bbb;
    border-radius: 5px;
    cursor: pointer;
}
.seat.selected {
    background-color: #6feaf6;
}
.seat.occupied {
    background-color: #444;
    cursor: not-allowed;
}

二、使用JavaScript动态生成座位

接下来，我们将使用JavaScript动态生成座位，这样可以根据不同影厅的需求灵活调整座位数量和布局。

1. 动态生成座位

我们将创建一个二维数组来表示座位的布局，并通过JavaScript循环生成HTML元素。

const rows = 10;
const cols = 10;
const container = document.querySelector('.seats-container');
for (let i = 0; i < rows; i++) {
    for (let j = 0; j < cols; j++) {
        const seat = document.createElement('div');
        seat.classList.add('seat');
        container.appendChild(seat);
    }
}

2. 预先占用部分座位

为了模拟实际情况，我们可以预先设置部分座位为已占用状态。

const occupiedSeats = [
    [0, 1], [0, 2], [1, 3], [1, 4], [2, 5], [2, 6]
];
occupiedSeats.forEach(([row, col]) => {
    const index = row * cols + col;
    container.children[index].classList.add('occupied');
});

三、实现座位状态切换

在影厅座位图中，座位的状态需要根据用户的操作进行切换，比如选择座位、取消选择等。

1. 座位点击事件

我们将为每个座位添加一个点击事件监听器，当用户点击座位时，切换其状态。

container.addEventListener('click', (event) => {
    if (!event.target.classList.contains('seat') || event.target.classList.contains('occupied')) {
        return;
    }
    event.target.classList.toggle('selected');
});

2. 更新座位状态

当座位状态发生变化时，我们可以更新相应的数据结构，以便在需要时进行保存或提交。

const selectedSeats = [];
container.addEventListener('click', (event) => {
    if (!event.target.classList.contains('seat') || event.target.classList.contains('occupied')) {
        return;
    }
    event.target.classList.toggle('selected');
    const index = Array.from(container.children).indexOf(event.target);
    const row = Math.floor(index / cols);
    const col = index % cols;
    if (event.target.classList.contains('selected')) {
        selectedSeats.push([row, col]);
    } else {
        const seatIndex = selectedSeats.findIndex(([r, c]) => r === row && c === col);
        selectedSeats.splice(seatIndex, 1);
    }
});

四、添加交互功能

除了基本的座位选择功能，我们还可以添加更多的交互功能，如显示已选择的座位数量、总票价等。

1. 显示已选择座位数量

我们可以在HTML中添加一个元素来显示已选择的座位数量，并通过JavaScript动态更新。

<p>已选择座位数量: <span id="count">0</span></p>

const count = document.getElementById('count');
container.addEventListener('click', (event) => {
    if (!event.target.classList.contains('seat') || event.target.classList.contains('occupied')) {
        return;
    }
    event.target.classList.toggle('selected');
    const selectedSeats = container.querySelectorAll('.seat.selected');
    count.textContent = selectedSeats.length;
});

2. 计算总票价

我们可以为每个座位设置一个价格，并在选择座位时计算总票价。

<p>总票价: ¥<span id="total">0</span></p>

const total = document.getElementById('total');
const ticketPrice = 50;
container.addEventListener('click', (event) => {
    if (!event.target.classList.contains('seat') || event.target.classList.contains('occupied')) {
        return;
    }
    event.target.classList.toggle('selected');
    const selectedSeats = container.querySelectorAll('.seat.selected');
    count.textContent = selectedSeats.length;
    total.textContent = selectedSeats.length * ticketPrice;
});

五、保存座位选择

为了在用户刷新页面或返回时保留座位选择状态，我们可以使用本地存储（Local Storage）来保存和加载座位数据。

1. 保存座位数据

在用户选择座位后，我们将座位数据保存到本地存储。

container.addEventListener('click', (event) => {
    if (!event.target.classList.contains('seat') || event.target.classList.contains('occupied')) {
        return;
    }
    event.target.classList.toggle('selected');
    const selectedSeats = Array.from(container.querySelectorAll('.seat.selected')).map(seat => 
        Array.from(container.children).indexOf(seat)
    );
    localStorage.setItem('selectedSeats', JSON.stringify(selectedSeats));
    count.textContent = selectedSeats.length;
    total.textContent = selectedSeats.length * ticketPrice;
});

2. 加载座位数据

在页面加载时，我们从本地存储中加载座位数据，并更新座位图的状态。

document.addEventListener('DOMContentLoaded', () => {
    const selectedSeats = JSON.parse(localStorage.getItem('selectedSeats')) || [];
    selectedSeats.forEach(index => {
        container.children[index].classList.add('selected');
    });
    count.textContent = selectedSeats.length;
    total.textContent = selectedSeats.length * ticketPrice;
});

通过以上步骤，我们实现了一个功能完善的影厅座位图。用户可以动态选择座位，查看已选择座位数量和总票价，并在页面刷新后保留座位选择状态。这不仅增强了用户体验，还提高了应用的实用性。