每天一个效果 ：（10）电影票选座

今天给大家分享一个电影票选座的样式，这个效果不用我多解释吧~相信这么聪明的你，应该知道长啥样吧~嘿嘿

我们还是先来看一下html和css代码

    <ul>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <div>屏幕中央</div>
    </ul>

    <style>
        * {
            padding: 0;
            margin: 0;
        }
        ul {
            display:flex;
            flex-wrap: wrap;
            width: 700px;
            height: 400px;
            justify-content: space-around;
            align-items: center;
            border: 1px solid #ccc;
            margin: 100px auto;
        }
        ul>li {
            width: 105px;
            height: 50px;
            background-color: #ccc;
            list-style: none;
        }
        div {
            line-height: 50px;
            text-align: center;
            width: 100px;
            height: 50px;
            border: 1px solid black;
        }
        .click {
            font-size: 10px;
            text-align: center;
            line-height: 50px;
            font-family: '仿宋';
            font-weight: bold;
            color: #333;
            background-color: orange;
            border: 1px solid red;
        }
    </style>

其中css中的.cilck就是一个类名一会我们的js中要用到。

让我们来看一下效果

 我们现在来梳理一下js的逻辑，想点击上面的座位，显示座位已选和变颜色，其实就是给它加一个类，在没有类的时候，我们点击之后就给他加一个，在有的时候，我们点击，便把这个类变为空就行了。这里面我们用到了一个getAttribute，它可以通过名称来获取属性的值，还有setAttribute更改属性的值。

下面我们看一下js代码

    <script>
        //逻辑：没有click类的时候，进行添加，同时对文本进行赋值，反之，清空click类，同时 文本赋值为空
        let lis = document.getElementsByTagName('li');
        for(let i = 0;i<lis.length;i++) {
            lis[i].onclick = function(){
                let res = this.getAttribute('class');
                if(!res) {
                    this.setAttribute('class','click');
                    this.innerText = '座位已选';
                }
                else {
                    this.setAttribute('class','');
                    this.innerText = '';
                }
            }
        }
    </script>

再让我们来看一下效果