js电影院选座功能的实现

## 样式

 <style>
        .item{
            width: 500px;
            display: flex;
            justify-content: space-around;
        }
        .item>div{
            width: 44px;
            height: 44px;
            line-height: 44px;
            text-align: center;
            background-color: lightblue;
            border-radius: 50px;
            margin-left: 5px;
            margin-top: 5px;
        }
        div.first{
            width: 66px;
        }
        .onchart{
            background-color: yellow !important;
        }
    </style>

## css部分

<div class="box"> </div>

## js部分

    var box = document.querySelector(".box");
    var title = document.createElement("div");
    title.style.width = "498px";
    title.style.color = "red";
    title.style.fontWeight = "bold";
    title.style.textIndent = "10px";
    title.style.marginTop = "10px";
    title.style.border = "1px solid black";

    test(7,12,box);
    function test(h,l,target) {
        for (var i = 0; i  < h ; i++){
            (function (i) {
                var item = document.createElement("div");
                item.setAttribute("class" , "item");
                target.appendChild(item);

                for (var j = 0 ; j < l ; j++){
                    (function (j) {
                        var div = document.createElement("div");
                        if (j == 0 ){
                            div.setAttribute("class" , "first");
                            div.innerText = "第" + (i+1) + "排"
                        }else {
                            div.setAttribute("class" , "chart");
                            div.innerText = j;
                            div.onclick = function () {
                                this.setAttribute("class" , "onchart");
                                var p = document.createElement("p");
                                p.innerText = "第" + (i + 1) + "排 第" + j + "号";
                                title.appendChild(p)
                            }
                        }
                        item.appendChild(div);
                    })(j)
                }
                target.appendChild(title)

            })(i)