jQuery实现影院选座订座效果，供大家参考，具体内容如下
效果如下：
代码如下：
<!DOCTYPE html>
< html >
< head >
< meta charset = "utf-8" >
< meta name = "viewport" content = "width=device-width; initial-scale=1.0" >
< title >jQuery影院选座订座效果代码</ title >
< meta name = "keywords" content = "jQuery,选座" >
< style type = "text/css" >
.demo {
width: 700px;
margin: 40px auto 0 auto;
min-height: 450px;
}
@media screen and (max-width: 360px) {
.demo {
width: 340px
}
}
.front {
width: 300px;
margin: 5px 32px 45px 32px;
background-color: #f0f0f0;
color: #666;
text-align: center;
padding: 3px;
border-radius: 5px;
}
.booking-details {
float: right;
position: relative;
width: 200px;
height: 450px;
}
.booking-details h3 {
margin: 5px 5px 0 0;
font-size: 16px;
}
.booking-details p {
line-height: 26px;
font-size: 16px;
color: #999
}
.booking-details p span {
color: #666
}
div.seatCharts-cell {
color: #182C4E;
height: 25px;
width: 25px;
line-height: 25px;
margin: 3px;
float: left;
text-align: center;
outline: none;
font-size: 13px;
}
div.seatCharts-seat {
color: #fff;
cursor: pointer;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
}
div.seatCharts-row {
height: 35px;
}
div.seatCharts-seat.available {
background-color: #B9DEA0;
}
div.seatCharts-seat.focused {
background-color: #76B474;
border: none;
}
div.seatCharts-seat.selected {
background-color: #E6CAC4;
}
div.seatCharts-seat.unavailable {
background-color: #472B34;
cursor: not-allowed;
}
div.seatCharts-container {
border-right: 1px dotted #adadad;
width: 400px;
padding: 20px;
float: left;
}
div.seatCharts-legend {
padding-left: 0px;
position: absolute;
bottom: 16px;
}
ul.seatCharts-legendList {
padding-left: 0px;
}
.seatCharts-legendItem {
float: left;
width: 90px;
margin-top: 10px;
line-height: 2;
}
span.seatCharts-legendDescription {
margin-left: 5px;
line-height: 30px;
}
.checkout-button {
display: block;
width: 80px;
height: 24px;
line-height: 20px;
margin: 10px auto;
border: 1px solid #999;
font-size: 14px;
cursor: pointer
}
#selected-seats {
max-height: 150px;
overflow-y: auto;
overflow-x: none;
width: 200px;
}
#selected-seats li {
float: left;
width: 72px;
height: 26px;
line-height: 26px;
border: 1px solid #d3d3d3;
background: #f7f7f7;
margin: 6px;
font-size: 14px;
font-weight: bold;
text-align: center
}
</ style >
</ head >
< body >
< div id = "main" >
< div class = "demo" >
< div id = "seat-map" >
< div class = "front" >屏幕</ div >
</ div >
< div class = "booking-details" >
< p >影片：< span >星际穿越</ span ></ p >
< p >时间：< span >11月14日 21:00</ span ></ p >
< p >座位：</ p >
< ul id = "selected-seats" ></ ul >
< p >票数：< span id = "counter" >0</ span ></ p >
< p >总计：< b >￥< span id = "total" >0</ span ></ b ></ p >
< button class = "checkout-button" >确定购买</ button >
< div id = "legend" ></ div >
</ div >
< div style = "clear:both" ></ div >
</ div >
< br />
</ div >
< script type = "text/javascript" src = "http://code.jquery.com/jquery-1.12.1.min.js" ></ script >
< script type = "text/javascript" src = "jquery.seat-charts.min.js" ></ script >
< script type = "text/javascript" >
var price = 70; /*票价*/
$(document).ready(function() {
var $cart = $('#selected-seats'),
/*座位区*/
$counter = $('#counter'),
/*票数*/
$total = $('#total'); /*总计金额*/
var sc = $('#seat-map').seatCharts({
map: [ /*座位图*/
'aaaaaaaaaa',
'aaaaaaaaaa',
'__________',
'aaaaaaaa__',
'aaaaaaaaaa',
'aaaaaaaaaa',
'aaaaaaaaaa',
'aaaaaaaaaa',
'aaaaaaaaaa',
'aa__aa__aa'
],
naming: {
top: false,
getLabel: function(character, row, column) {
return column;
}
},
legend: { /*定义图例*/
node: $('#legend'),
items: [
['a', 'available', '可选座'],
['a', 'unavailable', '已售出']
]
},
click: function() { /*点击事件*/
if (this.status() == 'available') { /*可选座*/
$('< li >' + (this.settings.row + 1) + '排' + this.settings.label + '座</ li >')
.attr('id', 'cart-item-' + this.settings.id)
.data('seatId', this.settings.id)
.appendTo($cart);
$counter.text(sc.find('selected').length + 1);
$total.text(recalculateTotal(sc) + price);
return 'selected';
} else if (this.status() == 'selected') { /*已选中*/
/*更新数量*/
$counter.text(sc.find('selected').length - 1);
/*更新总计*/
$total.text(recalculateTotal(sc) - price);
/*删除已预订座位*/
$('#cart-item-' + this.settings.id).remove();
/*可选座*/
return 'available';
} else if (this.status() == 'unavailable') { /*已售出*/
return 'unavailable';
} else {
return this.style();
}
}
});
/*已售出的座位*/
sc.get(['1_2', '4_4', '4_5', '6_6', '6_7', '8_5', '8_6', '8_7', '8_8', '10_1', '10_2']).status('unavailable');
});
/*计算总金额*/
function recalculateTotal(sc) {
var total = 0;
sc.find('selected').each(function() {
total += price;
});
return total;
}
</ body >
</ html >
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持服务器之家。
原文链接：https://blog.csdn.net/m0_46374969/article/details/115543408
dy("nrwz");
查看更多关于jQuery实现影院选座订座效果的详细内容...