jQuery实现影院选座订座效果
程序员文章站
2022-03-02 23:39:50
jquery实现影院选座订座效果,供大家参考,具体内容如下效果如下:代码如下:
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>
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。
下一篇: WebUploader实现图片上传功能