jQuery模拟在线选座

看了很多关于在线选座的例子,很多都引入了选座插件,而我将要介绍的是不用插件实现的选座功能

首先来看一下效果图
jQuery模拟在线选座_第1张图片

分析结构 可以把html部分分为四大部分 。后两部分采用固定定位的方式,将其固定在底部

jQuery部分写了两个方法,记录用户的操作

    function removeArr(key) {
   
            for(var i=0;iif(htmArr[i]==key){
                    htmArr.splice(i,1);//移除第i个元素
                }
            }
        }
        function addArr() {
   
            var thisHtml = "";
            for(var i=0;i"
  • "+htmArr[i]+"
  • " } $(".adds ul").html(thisHtml); }

    具体实现如下:

    
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Titletitle>
        <style>
            *{
                margin: 0;
                padding: 0;
                list-style: none;
            }
            body{
                background: #0f0f0f;
            }
            .container{
                width: 750px;
                margin: 0 auto;
            }
            .h-date{
                background: #ffffff;
                font-size: 30px;
                height: 80px;
                line-height: 80px;
                text-align: center;
            }
            .h-sign{
                padding: 20px;
                border-bottom: 1px solid #999;
            }
            .h-sign span{
                width: 45px;
                height: 35px;
                color: #ffffff;
                display: inline-block;/*行级块元素 给没有内容的行级元素留出空间  因为行级元素的宽高由内容撑的*/
                font-size:

    你可能感兴趣的:(jQuery,在线选座)