jQuery realizes the effect of theater seat selection and reservation

jQuery realizes the effect of theater seat selection and reservation, for your reference, the specific content is as follows

The effect is as follows:

The code is as follows:

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width; initial-scale=1.0">
    <title>jQuery theater seat selection and booking effect code</title>
    <meta name="keywords" content="jQuery,Seat selection">

    <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">Screen</div>
            </div>
            <div class="booking-details">
                <p>Movie: <span>Interstellar</span></p>
                <p>Time: <span>November 14, 21:00</span></p>
                <p>Seats:</p>
                <ul id="selected-seats"></ul>
                <p>Votes: <span id="counter">0</span></p>
                <p>Total: <b>￥<span id="total">0</span></b></p>

                <button class="checkout-button">Confirm purchase</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; /*Ticket price*/
        $(document).ready(function() {
            var $cart = $('#selected-seats'),
                /*Seating area*/
                $counter = $('#counter'),
                /*Number of votes*/
                $total = $('#total'); /*Total amount*/

            var sc = $('#seat-map').seatCharts({
                map: [ /* Seat map */
                    'aaaaaaaaaaa',
                    'aaaaaaaaaaa',
                    '__________',
                    'aaaaaaaa__',
                    'aaaaaaaaaaa',
                    'aaaaaaaaaaa',
                    'aaaaaaaaaaa',
                    'aaaaaaaaaaa',
                    'aaaaaaaaaaa',
                    'aa__aa__aa'
                ],
                naming:
                    top: false,
                    getLabel: function(character, row, column) {
                        return column;
                    }
                },
                legend: { /*Define the legend*/
                    node: $('#legend'),
                    items: [
                        ['a', 'available', 'Available seats'],
                        ['a', 'unavailable', 'sold']
                    ]
                },
                click: function() { /*click event*/
                    if (this.status() == 'available') { /*Optional seat*/
                        $('<li>' + (this.settings.row + 1) + 'row' + this.settings.label + 'seat</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') { /*Selected*/
                        /*Update quantity*/
                        $counter.text(sc.find('selected').length - 1);
                        /*Update total*/
                        $total.text(recalculateTotal(sc) - price);

                        /*Delete reserved seats*/
                        $('#cart-item-' + this.settings.id).remove();
                        /*Optional seat*/
                        return 'available';
                    } else if (this.status() == 'unavailable') { /*Sold*/
                        return 'unavailable';
                    } else {
                        return this.style();
                    }
                }
            });
            /*Sold seats*/
            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');

        });
        /*Calculate the total amount*/
        function recalculateTotal(sc) {
            var total = 0;
            sc.find('selected').each(function() {
                total += price;
            });

            return total;
        }
   
</body>

</html>

The above is the full content of this article. I hope it will be helpful for everyone’s study. I also hope that everyone will support 123WORDPRESS.COM.

You may also be interested in: