JS实现窗口管理_js可以弄窗口化程序吗-CSDN博客

本文链接：https://blog.csdn.net/qq_43549500/article/details/111777900

JS实现窗口管理

代码主要完成了如下的功能代码实现功能的主要手段是先创建好div等等元素通过点击事件控制它们的display属性,以完成对窗口的控制

代码主要完成了如下的功能

1.点击左侧菜单顶部的标题框出现下面对应的主体部分
在这里插入图片描述

2 点击标签显示正确的主体窗口
在这里插入图片描述

3.点击关闭按钮关闭对应的窗口

在这里插入图片描述

代码如下

代码比较简单就是通过点击来控制display为 block 和 none

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>

        * {
            font-family: 楷体;
        }

        html, body {
            padding: 0;
            margin: 0;
            width: 100%;
            height: 100%;
        }

        div {

            box-sizing: border-box;

        }

        .box {
            width: 100%;
            height: 100%;
            background: rgba(255, 74, 116, 0.13);

        }

        .left {
            background: rgba(0, 0, 0, 0.3);
            width: 20%;
            height: 100%;
            float: left;
            line-height: 50px;
            border: black 1px solid;
            box-shadow: 1px 1px 20px #2E2D3C;
        }

        .left ul {
            box-sizing: border-box;
            font-family: 楷体;
            padding: 0;
            margin: 0;
            padding-top: 50px;
            width: 100%;
            height: 100%;
            text-align: center;
        }

        .left li {
            box-sizing: border-box;
            list-style: none;
            background: rgba(237, 255, 192, 0.32);
            border: rgba(53, 120, 255, 0.32) 10px solid;
            width: 90%;
            text-align: center;
            box-shadow: darkcyan 1px 1px 10px;
            border-radius: 30px;
            color: cyan;

        }

        .left li:hover {
            cursor: pointer;
            background: rgba(64, 67, 181, 0.33);
        }


        .right {
            background: rgba(130, 147, 255, 0.13);
            width: 80%;
            height: 100%;
            float: left;
            border-radius: 15px;
        }

        .top1, .top2 {
            width: 100%;
            height: 10%;
            float: left;
            border: black 1px solid;
        }

        .top1 {
            background: rgba(255, 208, 68, 0.32);

        }

        .top2 {
            background: rgba(30, 39, 25, 0.16);
            border-radius: 15px;

        }

        .bottom {
            position: relative;
            border: black 1px solid;
            border-radius: 30px;
            box-sizing: border-box;
            clear: both;
            height: 80%;
            width: 100%;
        }

        .bottom div {
            line-height: 500px;
            text-align: center;
            font-size: 90px;
            font-family: 华文彩云;
            border-radius: 30px;
            background: deeppink;
            height: 100%;
            width: 100%;
            display: none;
        }

        .top2 div {
            color: white;
            margin: 0;
            box-sizing: border-box;
            border: 2px darkcyan solid;
            line-height: 63px;
            text-align: center;
            border-radius: 15px;
            background: #cccccc;
            height: 100%;
            width: 10%;
            display: none;
        }

        .top2 div:hover {
            background: #f3e2a0;
            cursor: pointer;
        }

        .top2 div button {
            border-radius: 15px;
        }

        .top2 div button:hover {
            outline: none;
            cursor: pointer;
            background: rgba(64, 67, 181, 0.33);
        }

    </style>
</head>
<body>
<div class="box">
    <div class="left">
        <ul>
            <h1>后台管理系统</h1>
            <li id="goods">商品管理</li>
            <li id="type">分类管理</li>
            <li id="order">订单管理</li>
            <li id="vip">会员管理</li>
            <li id="seting">系统设置</li>
        </ul>
    </div>
    <div class="right">
        <div class="top1">

        </div>
        <div class="top2" id="top-mid">
            <div id="top-1">
                商品管理
                <button id="but-1">x</button>
            </div>
            <div id="top-2">
                分类管理
                <button id="but-2">x</button>
            </div>
            <div id="top-3">
                订单管理
                <button id="but-3">x</button>
            </div>
            <div id="top-4">
                会员管理
                <button id="but-4">x</button>
            </div>
            <div id="top-5">
                系统设置
                <button id="but-5">x</button>
            </div>
        </div>

        <div class="bottom" id="bottom">
            <div id="bot1">商品管理</div>
            <div id="bot2">分类管理</div>
            <div id="bot3">订单管理</div>
            <div id="bot4">会员管理</div>
            <div id="bot5">系统设置</div>
        </div>


    </div>
</div>

<script>

    function $id(id) {
        return document.getElementById(id);
    }

    function queryAll(Tag) {
        return document.querySelectorAll(Tag)
    }

// 根据对应的id来显示对应的主体
    function $block(index, id1, id2, id3) {
        $id(id1).addEventListener('click', function () {

            if (!arr.includes(index)) {
                arr.push(index);
            }

            btns.forEach(e => {
                e.style.display = 'none';
            })
            $id(id2).style.display = 'block';
            $id(id3).style.display = 'inline-block';
        })
    }


    // 点击顶部的按钮触发的事件
    function $none(index, id1, id2) {
        $id(id1).addEventListener('click', function (e) {

            $id(id2).style.display = 'none';
            divs[index].style.display = 'none';

            for (let i = 0; i < arr.length; i++) {

                if (arr[i] == index) {
                    arr.splice(i, 1);
                }
            }

            if (arr.length > 0) {
                btns[arr[arr.length - 1]].style.display = 'block';
            }
            e.stopPropagation();
        })
    }

    //根据对应的两个

    function block_one(id1, id2) {
        $id(id1).addEventListener('click', function () {

            btns.forEach(e => {
                e.style.display = 'none';
            })

            $id(id2).style.display = 'block';

        })
    }

    /**buts  通过标签查询到的所有的 关闭按钮对象的集合
     * btns  主题显示区域对象的集合
     * lis   左侧菜单的对象的集合
     * divs  顶部按钮的父类div的集合
     * arr  每次添加顶部的div 对应下标都会加入数组
     * @type {NodeListOf<*>}
     */
    var buts = queryAll(".top2 div button");
    var btns = queryAll('.bottom>div');
    var lis = queryAll('.left ul li');
    var divs = queryAll(".top2 div");
    var arr = [];


    //点击左侧的菜单 点谁就主体显示那个 然后顶部显示其对应的按钮

    for (let i = 0; i < buts.length; i++) {
        $block(i, lis[i].id, btns[i].id, divs[i].id);
    }


    //点击顶部按钮关闭窗口
    for (let i = 0; i < buts.length; i++) {
        $none(i, buts[i].id, btns[i].id);
    }


    // 当点击div 显示其对应的主体
    for (let i = 0; i < buts.length; i++) {
        block_one(divs[i].id, btns[i].id);
    }

</script>
</body>
</html>