编写一个电影票座位,每一个复选框都是一个座位 用户选择座位,提示用户你选择座位有哪些,并且计算出价钱
时间: 2023-08-10 08:05:36 浏览: 38
以下是一个简单的电影票座位的HTML代码，使用JavaScript实现座位选择和计算价格的功能。
```html
<!DOCTYPE html>
<html>
<head>
<title>电影票座位选择</title>
<style>
.container {
display: flex;
flex-wrap: wrap;
justify-content: center;
align-items: center;
margin: 20px auto;
max-width: 800px;
}
.seat {
width: 50px;
height: 50px;
margin: 5px;
background-color: gray;
border-radius: 5px;
cursor: pointer;
display: flex;
justify-content: center;
align-items: center;
font-weight: bold;
color: white;
}
.seat.selected {
background-color: green;
}
</style>
</head>
<body>
<h1>电影票座位选择</h1>
<div class="container">
<!-- 生成20个座位复选框 -->
<?php
for ($i=1; $i<=20; $i++) {
echo '<div class="seat" data-price="10"><input type="checkbox" value="'.$i.'" /></div>';
}
?>
</div>
<p>您选择的座位为：<span id="selected-seats"></span></p>
<p>总价为：<span id="total-price">0</span>元</p>
<script>
const seats = document.querySelectorAll('.seat');
const selectedSeats = document.getElementById('selected-seats');
const totalPrice = document.getElementById('total-price');
let selectedCount = 0;
let price = 0;
// 点击座位时切换选中状态
seats.forEach(seat => {
seat.addEventListener('click', () => {
if (seat.classList.contains('selected')) {
seat.classList.remove('selected');
selectedCount--;
price -= parseInt(seat.getAttribute('data-price'));
} else {
seat.classList.add('selected');
selectedCount++;
price += parseInt(seat.getAttribute('data-price'));
}
selectedSeats.innerText = getSelectedSeats();
totalPrice.innerText = price;
});
});
// 获取选中的座位编号
function getSelectedSeats() {
const selected = [];
seats.forEach(seat => {
if (seat.classList.contains('selected')) {
selected.push(seat.querySelector('input').value);
}
});
return selected.join(',');
}
</script>
</body>
</html>
```
上述代码使用了PHP来生成20个座位复选框，您可以根据实际需求修改生成代码。每个座位都有一个data-price属性，表示该座位的价格。当用户选择座位时，我们会根据选中状态来计算总价，并在页面上显示出来。
相关推荐
最新推荐
CSS选择器到底有哪些？CSS笔记（一）
文章目录CSS简介CSS样式编写1、内联样式2、内部样式3、外部样式CSS语法选择器常用的选择器元素选择器id选择器类选择器选择器分组（并集选择器）通配选择器复合选择器（交集选择器）后代元素选择器子元素选择器伪类...
一个电影院购票平台任务书
电影院购票平台任务书，本课题的主要任务是构建电影院购票平台，超级管理员功能主要包括：首页轮播图管理、新闻资讯管理、用户管理、电影管理、影院论坛管理、投诉建议管理、统计中心等功能。 用户功能主要包括：...
如何用FFmpeg编写一个简单播放器详细步骤介绍
通过一步一步的介绍怎么去调用ffmpeg和sdl的库，来编写一个简单的视频播放器，使自己了解整个过程。
用python+pyqt5手工编写一个含交互界面的简易的词法分析器
python+pyqt5手工编写一个含交互界面的简易词法分析器 @author：x1nge. 编译原理基础实验 基础 在之前的一篇博文中我记录了一个不含交互界面的简易词法分析器程序编写内容 点击此处查看 在本文我将用pyqt5写一个...
C 语言编写一个网络蜘蛛（网络爬虫）
该文档详细介绍了网络蜘蛛（网络爬虫），并附带c语言开发的爬虫代码，对爬虫初学者很有用。
zigbee-cluster-library-specification
最新的zigbee-cluster-library-specification说明文档。
管理建模和仿真的文件
管理Boualem Benatallah引用此版本：布阿利姆·贝纳塔拉。管理建模和仿真。约瑟夫-傅立叶大学-格勒诺布尔第一大学，1996年。法语。NNT：电话：00345357HAL ID：电话：00345357https://theses.hal.science/tel-003453572008年12月9日提交HAL是一个多学科的开放存取档案馆，用于存放和传播科学研究论文，无论它们是否被公开。论文可以来自法国或国外的教学和研究机构，也可以来自公共或私人研究中心。L’archive ouverte pluridisciplinaire
实现实时数据湖架构：Kafka与Hive集成
# 1. 实时数据湖架构概述**
实时数据湖是一种现代数据管理架构，它允许企业以低延迟的方式收集、存储和处理大量数据。与传统数据仓库不同，实时数据湖不依赖于预先定义的模式，而是采用灵活的架构，可以处理各种数据类型和格式。这种架构为企业提供了以下优势：
- **实时洞察：**实时数据湖允许企业访问最新的数据，从而做出更明智的决策。
- **数据民主化：**实时数据湖使各种利益相关者都可
解释minorization-maximization (MM) algorithm，并给出matlab代码编写的例子
Minorization-maximization (MM) algorithm是一种常用的优化算法，用于求解非凸问题或含有约束的优化问题。该算法的基本思想是通过构造一个凸下界函数来逼近原问题，然后通过求解凸下界函数的最优解来逼近原问题的最优解。具体步骤如下：
1. 初始化参数 $\theta_0$，设 $k=0$；
2. 构造一个凸下界函数 $Q(\theta|\theta_k)$，使其满足 $Q(\theta_k|\theta_k)=f(\theta_k)$；
3. 求解 $Q(\theta|\theta_k)$ 的最优值 $\theta_{k+1}=\arg\min_\theta Q(
JSBSim Reference Manual
JSBSim参考手册，其中包含JSBSim简介，JSBSim配置文件xml的编写语法，编程手册以及一些应用实例等。其中有部分内容还没有写完，估计有生之年很难看到完整版了，但是内容还是很有参考价值的。