jQuery实现影院选座订座效果

OStack程序员社区-中国程序员成长平台 › 门户 › 编程› JavaScript›JavaScript编程经验

原作者: [db:作者] 来自: [db:来源] 收藏邀请

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>

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