模仿电影院座位预定效果

最新推荐文章于 2024-06-12 17:46:27 发布

J_小浩子

最新推荐文章于 2024-06-12 17:46:27 发布

阅读量1.3w

点赞数 5

文章标签： html 电影院购票电影院选座

本文链接：https://blog.csdn.net/change_on/article/details/74076547

版权

本文通过HTML、CSS和jQuery展示了如何创建一个简单的电影院座位预定效果。虽然初始界面简单，但可作为集成到更复杂预定系统的基础，例如结合时间选择功能。

摘要由CSDN通过智能技术生成

效果

这里写图片描述

Html代码：

<html>
<head>
<title>座位预定</title>

<link href="style.css" rel="stylesheet" type="text/css" />

<script src="js/jquery.min.js"></script>

<script>
$(document).ready(function(){
    

                var seat_num ;
                var total_bill      = 0 ;
                var pricePerTicked  = 300;//单价
                var maximumSeats    =   5;//预定座位数目的最大限制

                $('#bookNowButton').hide(); // 隐藏预定按钮

                $('.seat').each(function() {
           
                    var column_num = parseInt( $(this).index() ) + 1;
                    var row_num = parseInt( $(this).parent().index() )+1;    
                    seat_num = row_num+"-"+column_num ;  
                    $(this).text(seat_num); // 座位号
                    $(this).addClass("seat"+seat_num);  // 个座位加css
                });

                $("#seats .seat").click(function() {
      
                        $('#errMsg').html('');
                        if($(this).hasClass('select')){ // 检查是否被选中
                            $(this).removeClass('select'); //如果选中了，移除选中的css
                            $(this).css('background-color','#D8D8D8'); // 重新加个背景

                            var currentSeatClass = $(this).attr('class').split(' ')[1]; 

                            console.log(currentSeatClass);
                             $( "#selected_seat ."+currentSeatClass ).remove();

                        }else if($(".your_selected_seat").length<maximumSeats && !$(this).hasClass('select')){ // 检查预定的座位数目是否超出限制
                            $(this).css('background-color','#71DCAA'); // 加背景颜色
                            $(this).addClass("select"); // 添加选中css


                            var column_num = parseInt( $(this).index() ) + 1;
                            var row_num = parseInt( $(this).parent().index() )+1;    
                            $( "#selected_seat" ).append("<span class='your_selected_seat seat"+row_num+"-"+column_num+" '> 座位号: <b style='color:#EAABFF'>" + row_num+"-"+column_num +"</b> </br></span>");
                        }else {
                            $('#errMsg').html('您选中的座位已经超过限制.');    
                        }

                        if($(".your_selected_seat").length){
                            $('#bookNowButton').fadeIn(1000);
                        }else {
                            $('#bookNowButton').fadeOut(1000);
                        }
                        //计算总价
                        total_bill = $(".your_selected_seat").length * pricePerTicked;
                        $('#total > span').html(total_bill);
                });


    //}


});
</script>
</head>
<body>      


            <!--BOOKING SECTION START-->

            <div style="width:900px;margin: 0 auto;">
            <span id='screen'>
             <p>
                座位预定
            </p>
            </span>
            <div id="seats">
                <div class="seatsRaw">
                    <div class="seat"></div>
                    <div class="seat"></div>
                    <div class="seat"></div>
                    <div class="seat"></div>
                    <div class="seat"></div>
                    <div class="seat"></div>
                    <div class="seat"></div>
                    <div class="seat"></div>
                    <div class="seat"></div>
                    <div class="seat"></div>
                    <div class="seat"></div>
                    <div class="seat"></div>
                    <div class="seat"></div>
                    <div class="seat"></div>
                    <div class="seat"></

最低0.47元/天解锁文章

J_小浩子

关注

5
点赞
踩
60

收藏

觉得还不错? 一键收藏
4
评论
模仿电影院座位预定效果

效果Html代码：<html><head><title>座位预定</title><link href="style.css" rel="stylesheet" type="text/css" /><script src="js/jquery.min.js"></script><script>$(document).ready(function(){ var sea
复制链接

扫一扫