jQuery实现影院选座订座效果


Posted in jQuery onApril 13, 2021

jQuery实现影院选座订座效果,供大家参考,具体内容如下

效果如下:

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中关于bind()方法的使用技巧分享
Mar 30 jQuery
jQuery 添加样式属性的优先级别方法(推荐)
Jun 08 jQuery
jquery与js实现全选功能的区别
Jun 11 jQuery
jQuery实现简单的手风琴效果
Apr 17 jQuery
jQuery.Ajax()的data参数类型详解
Jul 23 jQuery
简单实现jQuery上传图片显示预览功能
Jun 29 jQuery
jQuery中extend函数简单用法示例
Oct 11 jQuery
Vue引入jquery实现平滑滚动到指定位置
May 09 jQuery
jQuery实现输入框的放大和缩小功能示例
Jul 21 jQuery
jQuery.extend 与 jQuery.fn.extend的用法及区别实例分析
Jul 25 jQuery
JQuery使用属性addClass、removeClass和toggleClass实现增加和删除类操作示例
Nov 18 jQuery
jQuery 选择器用法实例分析【prev + next】
May 22 jQuery
jQuery class属性操作addClass()与removeClass()、hasClass()、toggleClass()
jQuery treeview树形结构应用
Mar 24 #jQuery
jQuery实现鼠标拖动图片功能
Mar 04 #jQuery
ajax jquery实现页面某一个div的刷新效果
Mar 04 #jQuery
jquery实现广告上下滚动效果
Mar 04 #jQuery
html5以及jQuery实现本地图片上传前的预览代码实例讲解
Mar 01 #jQuery
jQuery是用来干什么的 jquery其实就是一个js框架
Feb 04 #jQuery
You might like
在PHP中使用XML
2006/10/09 PHP
php获取服务器操作系统相关信息的方法
2016/10/08 PHP
详解php实现页面静态化原理
2017/06/21 PHP
Thinkphp3.2简单解决多文件上传只上传一张的问题
2017/09/26 PHP
JavaScript isArray()函数判断对象类型的种种方法
2010/10/11 Javascript
根据当前时间在jsp页面上显示上午或下午
2014/08/18 Javascript
js在数组中删除重复的元素自保留一个(两种实现思路)
2014/08/22 Javascript
AngularJS 遇到的小坑与技巧小结
2016/06/07 Javascript
Node.js Addons翻译(C/C++扩展)
2016/06/12 Javascript
利用angularjs1.4制作的简易滑动门效果
2017/02/28 Javascript
React Js 微信禁止复制链接分享禁止隐藏右上角菜单功能
2017/05/26 Javascript
Node.js 8 中的 util.promisify的详解
2017/06/12 Javascript
vue实现全选、反选功能
2020/11/17 Javascript
vue一步步实现alert功能
2017/07/05 Javascript
vue.js组件之间传递数据的方法
2017/07/10 Javascript
JS操作时间 - UNIX时间戳的简单介绍(必看篇)
2017/08/16 Javascript
利用10行js代码实现上下滚动公告效果
2017/12/08 Javascript
微信小程序使用checkbox显示多项选择框功能【附源码下载】
2017/12/11 Javascript
Angular 开发学习之Angular CLI的安装使用
2017/12/31 Javascript
关于ES6箭头函数中的this问题
2018/02/27 Javascript
通过vue提供的keep-alive减少对服务器的请求次数
2018/04/01 Javascript
Angular模版驱动表单的使用总结
2018/05/05 Javascript
vue 组件内获取actions的response方式
2019/11/08 Javascript
Python 字符串大小写转换的简单实例
2017/01/21 Python
使用pygame模块编写贪吃蛇的实例讲解
2018/02/05 Python
python3解析库lxml的安装与基本使用
2018/06/27 Python
python中for循环输出列表索引与对应的值方法
2018/11/07 Python
Python使用ctypes调用C/C++的方法
2019/01/29 Python
python使用KNN算法识别手写数字
2019/04/25 Python
python GUI库图形界面开发之PyQt5信号与槽多窗口数据传递详细使用方法与实例
2020/03/08 Python
python网络编程之五子棋游戏
2020/05/14 Python
linux面试题参考答案(4)
2014/09/21 面试题
测绘工程个人的自我评价
2013/11/10 职场文书
服务口号大全
2014/06/11 职场文书
纪检干部学习心得体会
2016/01/23 职场文书
Python必备技巧之函数的使用详解
2022/04/04 Python