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正则表达式在页面验证url网址输入是否正确
Apr 04 jQuery
jquery中封装函数传递当前元素的方法示例
May 05 jQuery
jQuery自动或手动图片切换效果
Oct 11 jQuery
jQuery阻止事件冒泡实例分析
Jul 03 jQuery
jQuery实现的监听导航滚动置顶状态功能示例
Jul 23 jQuery
jQuery实现的五星点评功能【案例】
Feb 18 jQuery
jQuery中使用validate插件校验表单功能
May 24 jQuery
JS秒杀倒计时功能完整实例【使用jQuery3.1.1】
Sep 03 jQuery
jQuery实现可编辑的表格
Dec 11 jQuery
jQuery+css实现的点击图片放大缩小预览功能示例【图片预览 查看大图】
May 29 jQuery
jQuery 添加元素和删除元素的方法
Jul 15 jQuery
jQuery实现计算器功能
Oct 19 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 XMLWriter类的简单示例代码(RSS输出)
2011/09/30 PHP
为PHP安装imagick时出现Cannot locate header file MagickWand.h错误的解决方法
2014/11/03 PHP
PHP通过反射动态加载第三方类和获得类源码的实例
2015/11/27 PHP
功能强大的PHP POST提交数据类
2016/07/15 PHP
php实现的简单中文验证码功能示例
2017/01/03 PHP
php微信公众号开发之音乐信息
2018/10/20 PHP
Laravel 对某一列进行筛选然后求和sum()的例子
2019/10/10 PHP
WordPress伪静态规则设置代码实例
2020/12/10 PHP
Extjs ajax同步请求时post方式参数发送方式
2009/08/05 Javascript
JavaScript随机排序(随即出牌)
2010/09/17 Javascript
16个最流行的JavaScript框架[推荐]
2011/05/29 Javascript
jquery固定底网站底部菜单效果
2013/08/13 Javascript
js正则表达式中test,exec,match方法的区别说明
2014/01/29 Javascript
浅谈javascript 归并方法
2015/01/21 Javascript
javascript为按钮注册回车事件(设置默认按钮)的方法
2015/05/09 Javascript
js控制TR的显示隐藏
2016/03/04 Javascript
jQuery事件委托之Safari
2016/07/05 Javascript
微信小程序 swiper组件详解及实例代码
2016/10/25 Javascript
jQuery删除当前节点元素
2016/12/07 Javascript
DropDownList实现可输入可选择(两种版本可选)
2016/12/07 Javascript
JS实现PC手机端和嵌入式滑动拼图验证码三种效果
2017/02/15 Javascript
jQuery实现html table行Tr的复制、删除、计算功能
2017/07/10 jQuery
浅谈react前后端同构渲染
2017/09/20 Javascript
vue如何判断dom的class
2018/04/26 Javascript
JavaScript中工厂函数与构造函数示例详解
2019/05/06 Javascript
使用JS判断页面是首次被加载还是刷新
2019/05/26 Javascript
js实现掷骰子小游戏
2019/10/24 Javascript
[00:32]2018DOTA2亚洲邀请赛出场——LGD
2018/04/04 DOTA
使用httplib模块来制作Python下HTTP客户端的方法
2015/06/19 Python
Python使用matplotlib绘制正弦和余弦曲线的方法示例
2018/01/06 Python
hmac模块生成加入了密钥的消息摘要详解
2018/01/11 Python
Dower & Hall官网:英国小众轻奢珠宝品牌
2019/01/31 全球购物
中韩经贸翻译专业大学生职业生涯规划范文
2014/09/18 职场文书
毕业实习证明范本
2015/06/16 职场文书
开工典礼致辞
2015/07/29 职场文书
深入浅出讲解Java8函数式编程
2022/01/18 Java/Android