完整的DOM day019

达峰
101 阅读1分钟

用户确认框：var bool=confirm("提示文字");

true->确认	false->取消

开关门案例

开关门案例.png

选项卡案例

选项卡案例.png

摇号功能案例

摇号功能.png

国家联动案例

<!DOCTYPE HTML>
<html>

<head>
    <title>读取并修改元素的内容</title>
    <meta charset="utf-8" />
    <style>
        select {
            width: 100px;
            height: 85px;
        }

        div {
            display: inline-block;
            width: 50px
        }
    </style>

</head>

<body>
    <!--假设两个select元素，分别保存备选地区列表和选中地区列表
实现两选择框之间选项的交换：
    包括：当个选中项左右移动
              多个选中项左右移动
              全左移和全右移
要求：两个select中的地区都要按照名称首字母排序
-->
    <select size="5" multiple>
        <option>Argentina</option>
        <option>Brazil</option>
        <option>Canada</option>
        <option>Chile</option>
        <option>China</option>
        <option>Cuba</option>
        <option>Denmark</option>
        <option>Egypt</option>
        <option>France</option>
        <option>Greece</option>
        <option>Spain</option>
    </select>
    <div>
        <button>&gt;&gt;</button>
        <button>&gt;</button>
        <button>&lt;</button>
        <button>&lt;&lt;</button>
    </div>
    <select id="sel" size="5" multiple>
    </select>
    <script type="text/javascript">
//只有一个东西可以排序就是数组 所以第一步想办法吧页面上的东西，先变为左跟右数组 然后点击按钮移动数组，先排序，再根据数组渲染页面
        var larr = [];//创建左数组
        var larr1 = [];//创建右数组
        var unsel = document.querySelectorAll("select")[0];
        var sel = document.querySelectorAll("select")[1];
        //根据页面生成数据
        larr = unsel.innerHTML.trim().slice(8, -9).split(/<\/option>\s+<option>/);//拿到里面所有的内容 trim（）去掉开头和结尾的空白字符 再截取 得到之后再切割 切割支持正则得到数组
        var btns = document.querySelectorAll("button");
        btns.forEach(btns => {//给所有按钮绑定事件
            btns.onclick = function () {//页面有四个按钮所以每个的功能都不同所以要做判断给每个按钮做不同的功能
                switch (this.innerText) {//判断switch性能最好
                    //点击>>其实就是吧左数组larr的东西放到右数组larr1上 左数组再清空
                    case ">>":
                        larr1 = larr1.concat(larr);//拼接数组参数 数组打散进行传入 但是不修改原数组所以要保存一哈
                        larr = [];//清空左数组
                        console.log(larr1);
                        console.log(larr);
                        break;

                    //点击<<其实就是吧右数组larr1的东西放到左数组larr上 右数组再清空
                    case "<<":
                        larr = larr.concat(larr1);//拼接数组参数 数组打散进行传入 但是不修改原数组所以要保存一哈
                        larr1 = [];//清空右数组 

                        break;

                    case ">":
                        var opts = unsel.options;//得到左边unsel里面的所有的option
                        //循环得到每一个option判断
                        for (var i = opts.length - 1; i >= 0; i--) {
                            //判断option有没有被选中
                            if (opts[i].selected) {//被选中了在移动数组
                                //拿到被选中的下边删除数组中的对应的一个元素，在放到右数组中
                                larr1 = larr1.concat(larr.splice(i, 1))//循环是一次一次做的 一次只删一个循环得不断的做 删除的是我们需要的再保存
                            }
                        }
                        break;
                    case "<":
                        var opts = sel.options;//得到左边unsel里面的所有的option
                        //循环得到每一个option判断
                        for (var i = opts.length - 1; i >= 0; i--) {
                            //判断option有没有被选中
                            if (opts[i].selected) {//被选中了在移动数组
                                //拿到被选中的下边删除数组中的对应的一个元素，在放到右数组中
                                larr = larr.concat(larr1.splice(i, 1))//循环是一次一次做的 一次只删一个循环得不断的做 删除的是我们需要的再保存
                            }
                        }
                        break;
                }
                larr.sort();//默认按照字符串排序
                larr1.sort();
                //数据渲染
                render();//专门用于渲染左右数组的
            }
        })
        //专门用于渲染左右数组的
        function render() {
            if (larr.length == 0) {//如果左数组是空
                unsel.innerHTML = ""//设置左数组为空
            } else {//否则左数组是有国家的
                unsel.innerHTML = "<option>" + larr.join("</option><option>") + "</option>"//根据左数组渲染页面 拼接join先拼结束在拼开始
            }
            if (larr1.length == 0) {//如果右数组是空
                sel.innerHTML = ""//设置右数组为空
            } else {//否则右数组是有国家的
                sel.innerHTML = "<option>" + larr1.join("</option><option>") + "</option>"//根据右数组渲染页面 拼接join先拼结束在拼开始
            }
        }

    </script>
</body>

</html>

国家联动.png

二级联动案例

<!DOCTYPE HTML>
<html>

<head>
    <title>二级联动列表</title>
    <meta charset="utf-8" />
    <style>
        .hide {
            display: none;
        }
    </style>
</head>

<body>
    <select name="provs">
        <option>—请选择—</option>
        <!--0-->
        <option>北京市</option>
        <!--1-->
        <option>天津市</option>
        <option>河北省</option>
    </select>

    <select name="cities" class="hide">
    </select>


    <script>
        //根据JSON数据渲染二级联动
        var cities = [
            [],//请选择对应这个空数组
            [{ "name": '东城区', "value": 101 },
            { "name": '西城区', "value": 102 },
            { "name": '海淀区', "value": 103 },
            { "name": '朝阳区', "value": 104 }],//北京对应
            [{ "name": '河东区', "value": 201 },
            { "name": '河西区', "value": 202 },
            { "name": '南开区', "value": 203 }],//天津对应
            [{ "name": '石家庄市', "value": 301 },
            { "name": '廊坊市', "value": 302 },
            { "name": '保定市', "value": 303 },
            { "name": '唐山市', "value": 304 },
            { "name": '秦皇岛市', "value": 305 }]//河北对应
        ];

        var sels = document.querySelectorAll("select");//找到页面上所有的select
        //给第一个select绑定select专属事件状态改变事件
        sels[0].onchange=function () {
            var i = this.selectedIndex;//只要是联动就要选中项的下标
            if (i > 0) {//有两种情况 一个是大于0
                //渲染生成之前做这个事情 因为有个class为hide
                sels[1].className = "";//吧它设置为空
                sels[1].innerHTML = "";//每次切换过后 再吧它本来有的东西设置为空字符串
                cities[i].forEach(obj => {//得到区县数据 然后forEach得到每一个数据
                    //select.add(new Option("innerHTML","value"));一句话做四个操作
                    sels[1].add(new Option(obj.name, obj.value));//遍历过后渲染生成DOM元素再上树
                })
            } else {//等于0 就是请选择
                sels[1].className = "hide";
                sels[1].innerHTML = "";
            }

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

二级联动JSON.png

JSON渲染表格案例

<!DOCTYPE HTML>
<html>

<head>
    <title>动态操作表格</title>
    <meta charset="utf-8" />
    <style>
        table {
            width: 1200px;
            border-collapse: collapse;
            text-align: center;
            margin: 0 auto;
            table-layout: fixed;
        }

        td {
            border: 1px solid #ccc
        }

        thead td {
            font-weight: bold;
        }
    </style>

</head>

<body>
    <div id="data1"></div>

    <script>
        //根据我提供的JSON数据，渲染表格
        var data = [
            { "id": 1001, "name": '可口可乐', "price": 2.5, "count": 3000 },
            { "id": 1003, "name": '百事可乐', "price": 2.5, "count": 5000 },
            { "id": 1011, "name": '非常可乐', "price": 2.3, "count": 1000 },
            { "id": 1011, "name": '天府可乐', "price": 2.3, "count": 1000 },
            { "id": 1011, "name": '地府可乐', "price": 2.3, "count": 1000 },
            { "id": 1011, "name": '阳间可乐', "price": 2.3, "count": 1000 },
            { "id": 1011, "name": '阴间可乐', "price": 2.3, "count": 1000 },
        ];
        //创建了表头的数据
        var arr = ["序号", "名称", "单价", "数量", "操作"]
        //创建table
        var table = document.createElement("table");
        //创建了一个tr来保存表头的东西
        var tr = document.createElement("tr");
        arr.forEach(str => {//遍历表头数据，拿到每一个字符串，
            var td = document.createElement("td");//每有一个字符串则创建一个td来保存
            td.innerHTML = str;
            tr.appendChild(td);

        })
        table.appendChild(tr)
        //遍历后端（暂时死数据）提供给我们的数据，拿到里面每一个对象（产品）
        data.forEach(obj => {
            //每有一个产品就应该创建一行
            var tr = document.createElement("tr");
            //行里面需要放入列，我们遍历了此对象（产品）有多少个信息，
            for (var i in obj) {
                //就应该创建出多少个td进行保存
                var td = document.createElement("td");
                td.innerHTML = obj[i];
                tr.appendChild(td);
            }
            //单独再每一行的最后添加了一个td保存我们的删除按钮
            var td = document.createElement("td");
            td.innerHTML = "<button onclick='del(this)'>x</button>";
            tr.appendChild(td);
            table.appendChild(tr)
        })
        data1.appendChild(table);
        //点击删除按钮该的操作
        function del(btn) {//曾经学过弹出框：警告框alert、输入框prompt、今天再教你最后一个：确认框
            var bool = confirm(`确定要删除${btn.parentNode.parentNode.firstElementChild.nextElementSibling.innerHTML}吗`)
            if (bool) {
                btn.parentNode.parentNode.remove();
            }
        }
    </script>
</body>

</html>

JSON渲染表格.png

JSON数据多级联动层级不明确选中递归案例

<!DOCTYPE HTML>
<html>

<head>
    <title>联动菜单</title>
    <meta charset="utf-8" />

</head>

<body>
    <div id="category">

    </div>

    <script>
        /*根据我提供的JSON数据渲染多级联动*/
        var categories = [
            {
                "id": 10, "name": '男装', "children": [
                    { "id": 101, "name": '正装' },
                    { "id": 102, "name": 'T恤' },
                    { "id": 103, "name": '裤衩' }
                ]
            },
            {
                "id": 20, "name": '女装', "children": [
                    { "id": 201, "name": '短裙' },
                    { "id": 202, "name": '连衣裙' },
                    {
                        "id": 203, "name": '裤子', "children": [
                            { "id": 2031, "name": '长裤' },
                            { "id": 2031, "name": '九分裤' },
                            { "id": 2031, "name": '七分裤' }
                        ]
                    },
                ]
            },
            {
                "id": 30, "name": '童装', "children": [
                    { "id": 301, "name": '帽子' },
                    {
                        "id": 302, "name": '套装', "children": [
                            { "id": 3021, "name": "0-3岁" },
                            {
                                "id": 3021, "name": "3-6岁", "children": [
                                    { "id": 101, "name": '正装' },
                                    { "id": 102, "name": 'T恤' },
                                    { "id": 103, "name": '裤衩' }
                                ]
                            },
                            { "id": 3021, "name": "6-9岁" },
                            { "id": 3021, "name": "9-12岁" }
                        ]
                    },
                    { "id": 303, "name": '手套' }
                ]
            }
        ];
        //递归 传入根数据 
        function f1(arr) {

            var select = document.createElement("select");//生成select 核心dom生成

            select.add(new Option("-请选择-", -1))//一来有个请选择 Value可以不给但是最好给负数只要不等于其他value

            arr.forEach(obj => {//得到每一个对象
                select.add(new Option(obj.name, obj.id));//obj.name拿到男装..女装 id拿到Value
            })
            select.onchange = function () {//绑定绑定select专属事件状态改变事件
                while (this.nextElementSibling) {
                    this.nextElementSibling.remove();
                }
                var i = this.selectedIndex;//得到下标
                if (i > 0) {
                    if (arr[i - 1].children) {
                        f1(arr[i - 1].children)
                    }
                }
            }
            category.appendChild(select);//上树
        }
        f1(categories)//调用的时候传入 根数据
    </script>
</body>

</html>

JSON数据多级联动层级不明确.png

avatar
文章
阅读
粉丝