本文通过DOM对象的方法实现选电影票的功能，包括初始状态展示、选择、取消等操作。首先介绍效果展示，如初始状态的座位分布，选座后的变化。接着分析实现过程，涉及布局设计、电影票数据结构、座位可视化生成、点击响应及取消选座的逻辑。通过这个实例，读者可以加深对DOM操作的理解。
文章目录
实例：选电影票（通过DOM对象的方法实现）
效果展示
1. 初始状态
浅灰色的表示可以选择的座位；红色的表示票已经售出，不可选择。
2. 选择
点击要选择的座位，会计算出票价，并显示选择的座位对应的票。
3. 取消
通过点击绿色的座位（或者下方的票），实现取消票的选择。
分析
1. 布局
在这个例子中，布局较为简单，使用三个容器布局即可：第一个容器用来放置座位、第二个容器用来放置选择的票、第三个容器用来放置已经选择的票的总价格。
<body>
<div id="seats" class="center border">
</div>
<div id="selected" class="center border top_margin">
</div>
<div class="center total">
总票价：￥<span id="totalPrice">0</span>
</div>
</body>
2. 电影票及电影票生成
简单分析，一张电影票最基础的信息有：id、行号、列好、价格、是否售出。（其实真正要做电影票的业务，还要包括其他的信息，例如电影名，放映事件等等。这里只是为了巩固之前学习的知识）
因此，可以写一个简单的类。
function Ticket(ticketId, rowId, colId, price, isSold){
this.ticketId = ticketId;
this.rowId = rowId;
this.colId = colId;
最低0.47元/天 解锁文章
扫一扫
342
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
