电影选座功能（二）

最新推荐文章于 2024-08-22 14:32:34 发布

黎明不管黑夜的星空

最新推荐文章于 2024-08-22 14:32:34 发布

阅读量202

点赞数 3

分类专栏： Javascript 前端 htmlcss 文章标签： javascript 前端

本文链接：https://blog.csdn.net/weixin_50930483/article/details/141305654

版权

Javascript 同时被 3 个专栏收录

17 篇文章 0 订阅

订阅专栏

htmlcss

11 篇文章 0 订阅

订阅专栏

前端

10 篇文章 0 订阅

订阅专栏

代码如下：

<!DOCTYPE html>
<html lang="zh-cn">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title></title>
    <style>
        ul {
            padding: 0;
            margin: 0;
            list-style: none;
        }

        ul li {
            width: 450px;
            height: 90px;
            font-size: 0;
        }

        ul li span {
            display: inline-block;
            width: 88px;
            height: 88px;
            font-size: 16px;
            background-color: #ccc;
            border: 1px solid #fff;
        }

        ul li [class^="icon"] {
            background-image: url(./images/zuowei.png);
            background-repeat: no-repeat;
        }

        .icon-1 {
            background-position: 0 0;
        }

        .icon-2 {
            background-position: 0 -90px;
        }

        .icon-3 {
            background-position: 0 -180px;
        }
    </style>
</head>

<body>

    <script>
        // 添加自定义类名/属性做判断 
        // 座位的数据（二维数组） 4行5列
        var data = [
            [1, 1, 1, 1, 1],
            [1, 3, 3, 3, 1],
            [1, 3, 3, 3, 1],
            [1, 1, 2, 2, 1]
        ]
        // 要求：
        // 数字1，表示空的座位
        // 数字2，表示预定的额座位
        // 数字3，表示已售空的座位
        // 定义字符串
        var html = "<ul>";
        // 外循环
        for (var i = 0; i < data.length; i++) {
            // 拼接字符串li标签
            html += "<li>";
            // 内循环
            for (var j = 0; j < data[i].length; j++) {
                // 拼接span标签 data[i][j] 表示取出嵌套数组的 "数字"
                html += "<span class='icon-" + data[i][j] + "'></span>";

            }
            //li结束标签
            html += "</li>";
        }
        // ul结束标签
        html += "</ul>";

        // 渲染字符串
        document.write(html);



    </script>
</body>

</html>

PS：仅供练习逻辑。