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>
    

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。

• 基于jquery实现在线选座订座之影院篇
• jQuery在线选座位插件seat-charts特效代码分享
• 基于jQuery实现在线选座之高铁版

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！