JS实现窗口管理

最新推荐文章于 2023-01-05 17:45:23 发布

qq_43549500

最新推荐文章于 2023-01-05 17:45:23 发布

阅读量267

点赞数 1

本文链接：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>

qq_43549500

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
JS实现窗口管理

JS实现窗口管理代码主要完成了如下的功能代码实现功能的主要手段是先创建好div等等元素通过点击事件控制它们的display属性,以完成对窗口的控制代码主要完成了如下的功能1.点击左侧菜单顶部的标题框出现下面对应的主体部分2 点击标签显示正确的主体窗口3.点击关闭按钮关闭对应的窗口代码如下代码比较简单就是通过点击来控制display为 block 和 none<!DOCTYPE html><html lang="en"><head>
复制链接

扫一扫