# 影院选座

最新推荐文章于 2024-04-04 19:51:59 发布

mhgy1202

最新推荐文章于 2024-04-04 19:51:59 发布

阅读量188

点赞数

分类专栏： 222 文章标签： 222 1213

本文链接：https://blog.csdn.net/mhgy1202/article/details/102788198

版权

222 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

影院选座

<style>
        #box {
            width: 600px;
            height: 600px;
            background-color: cadetblue;
            display: flex;
            margin: 50px auto;
            flex-wrap: wrap;
  }
 </style>
 
 <body>
<!-- 影院选座 -->
<div id="box"></div>
    <script>
    
    // 给九个div添加样式
        var box = document.getElementById('box');
        for (var i = 0; i < 3; i++) {
            for (var j = 0; j < 3; j++) {
                var div = document.createElement('div');  //创建一个div
                div.style.width = '200px';
                div.style.height = '200px';
                div.style.border = '1px solid red';
                div.style.boxSizing = 'border-box';
                box.appendChild(div);  //把创建的div添加到box里

                div.innerHTML = i * 3 + j + 1;

        // 给div添加isSelected属性，来记录是否被选中
                div.isSelected = false;

                div.onclick = function (e) {
                    if (e.target.isSelected == true) {
                        e.target.style.backgroundColor = '';
                    }
                    else {
                        e.target.style.backgroundColor = 'red';
                    }
                    e.target.isSelected = !e.target.isSelected;

                }
            }
        }
         </script>
</body>