Html+css+Jquery模拟电影院购票

17-06-20 来源：[db:作者]
收藏我要投稿
采用2D的方式模拟电影院购票的系统。选择的座位一次的追加到代付款的模块当中，最后确认信息后进行购票。
<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style>
            .box{
                width: 540px;
                height: 760px;
            }
            .weizi{
                float: left;
                padding-top: 24px;
                padding-bottom: 42px;
                border-bottom: dashed;
            }
            .first span
            {
                display: inline-block;
                width: 38px;
                height: 38px;
                font-size: 13px;
                background-color: #B9DEA0;
                text-align: center;
                color: #fff;
                cursor: pointer;
                border-radius: 5px;
                margin-top: 24px;
            }
            .fourth span
            {
                display: inline-block;
                width: 38px;
                height: 38px;
                color: #fff;
                font-size: 13px;
                background-color: #B9DEA0;
                text-align: center;
                cursor: pointer;
                border-radius: 5px;
                margin-top: 24px;
            }
            .second span{
                display: inline-block;
                width: 38px;
                height: 38px;
                color: #fff;
                font-size: 13px;
                background-color: #B9DEA0;
                text-align: center;
                cursor: pointer;
                border-radius: 5px;
                margin-top: 24px;
            }
            .third span{
                display: inline-block;
                width: 38px;
                height: 38px;
                color: #fff;
                font-size: 13px;
                background-color: #B9DEA0;
                text-align: center;
                cursor: pointer;
                border-radius: 5px;
                margin-top: 24px;
            }
            .show{
                font-size: x-large;
                float: right;
                background-color: #f0f0f0;
                color: #666;
                border-radius: 5px;
                height: 320px;
                width: 36px;
                text-align: center;
                line-height: 146px;
            }
            .booking-details {
                float: left;
                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
            }
             
        </style>
    </head>
    <body>
        <div class="box">
            <div class="weizi">
                <div class="first">
                    <span>1-1</span>
                    <span>1-2</span>
                    <span>1-3</span>
                    <span>1-4</span>
                    <span>1-5</span>
                    <span>1-6</span>
                    <span>1-7</span>
                    <span>1-8</span>
                    <span>1-9</span>
                    <span>1-10</span>
                </div>
                <div class="second">
                    <span>2-1</span>
                    <span>2-2</span>
                    <span>2-3</span>
                    <span>2-4</span>
                    <span>2-5</span>
                    <span>2-6</span>
                    <span>2-7</span>
                    <span>2-8</span>
                </div>
                <div class="third">
                    <span>3-1</span>
                    <span>3-2</span>
                    <span>3-3</span>
                    <span>3-4</span>
                    <span>3-5</span>
                    <span>3-6</span>
                    <span>3-7</span>
                    <span>3-8</span>
                </div>
                <div class="fourth">
                    <span>4-1</span>
                    <span>4-2</span>
                    <span>4-3</span>
                    <span>4-4</span>
                    <span>4-5</span>
                    <span>4-6</span>
                    <span>4-7</span>
                    <span>4-8</span>
                    <span>4-9</span>
                    <span>4-10</span>
                </div>
            </div>
            <div class="show">屏幕</div>
            <div class="booking-details">
                <p id="zuowei">座位：</p>
                <ul id="selected-seats"></ul>
                <p>票数：<span id="counter">0</span></p>
                <p>单价：<span id="singleprice"></span></p>
                <p>总计：<b>￥<span id="total">0</span></b></p>
                <button class="checkout-button" onclick='return confirm("确认购买吗？")'>确定购买</button>
                <div id="legend"></div>
            </div>
        </div>
        <script src="Jquery/jquery.js"></script>
        <script>
            var price=5;
            $(document).ready(function(){
                $("#singleprice").text(price);
                $("span").toggle(function(){
                    $(this).css('backgroundColor','gray');
                    $('<li>'+this.innerText+'</li>').appendTo("#zuowei");
                    var ccon=parseInt($("#counter").text());
                    $("#counter").text((ccon + 1).toString());
                    var tprice=parseInt($("#total").text());
                    $("#total").text((tprice+ price).toString());
                },function(){
                    $(this).css('backgroundColor','#B9DEA0');
                    $("li:contains('"+$(this).text()+"')").remove();
                    var ccon=parseInt($("#counter").text());
                    $("#counter").text((ccon -1).toString());
                    var tprice=parseInt($("#total").text());
                    $("#total").text((tprice-price).toString());
                });
            });
        </script>
    </body>
</html>
点击复制链接与好友分享!回本站首页