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>

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持云海天教程。