前端三大件速成 06 小练习：模态对话框、正反选、二级联动

2024-06-12 23:14:02
开发
33

文章目录

一、小练习：模态对话框
二、小练习：正反选
三、二级联动

一、小练习：模态对话框

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .content{
            height: 1800px;
            background-color: white;
        }

        .shade{
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background-color: gray;
            opacity: 0.7;
        }

        .model{
            width: 200px;
            height: 200px;
            background-color: bisque;
            position: absolute;
            top: 50%;
            left: 50%;
            margin-top: -100px;
            margin-left: -100px;
        }

        .hide{
            display: none;
        }
    </style>
</head>
<body>

<div class="content">
    <button onclick="show()">show</button><br>
    hello world hello world <br>
    hello world hello world <br>
    hello world hello world <br>
    hello world hello world <br>
</div>

<div class="shade hide"></div>

<div class="model hide">
    <button onclick="cancel()">cancel</button>
</div>

<script>
    function show(){
        var ele_shade=document.getElementsByClassName("shade")[0];
        var ele_model=document.getElementsByClassName("model")[0];

        ele_model.classList.remove("hide");
        ele_shade.classList.remove("hide");
    }

    function cancel(){
        var ele_shade=document.getElementsByClassName("shade")[0];
        var ele_model=document.getElementsByClassName("model")[0];

        ele_shade.classList.add("hide")
        ele_model.classList.add("hide")
    }

</script>

</body>
</html>

二、小练习：正反选

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

<button onclick="selectAll()">全选</button>
<button onclick="cancel()">取消</button>
<button onclick="reverse()">反选</button>
<hr>

<table>
    <tr>
        <td><input type="checkbox"></td>
        <td>111</td>
        <td>111</td>
        <td>111</td>
    </tr>
    <tr>
        <td><input type="checkbox"></td>
        <td>222</td>
        <td>222</td>
        <td>222</td>
    </tr>
    <tr>
        <td><input type="checkbox"></td>
        <td>333</td>
        <td>333</td>
        <td>333</td>
    </tr>
</table>

<script>

    function selectAll(){
        var inputs = document.getElementsByTagName("input");

        for (var i=0;i<inputs.length;i++){
            var input=inputs[i];
            input.checked=true;
        }
    }

    function cancel(){
        var inputs = document.getElementsByTagName("input");

        for (var i=0;i<inputs.length;i++){
            var input=inputs[i];
            input.checked=false;
        }
    }

    function reverse(){
        var inputs = document.getElementsByTagName("input");
        var input;

        for (var i=0;i<inputs.length;i++){
            input = inputs[i];
            input.checked = !input.checked;
        }
    }

</script>

</body>
</html>

三、二级联动

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

<select id="provinces">
    <option value="">请选择省份</option>
</select>

<select id="citys">
    <option value="">请选择城市</option>
</select>

<script>
    data={"河北省":["石家庄","廊坊"],"山西":["晋城","大同"],"陕西":["西安","延安"]};
    var pro_ele=document.getElementById("provinces");
    var city_ele=document.getElementById("citys");

    // 添加省名
    for (var i in data){
        var ele=document.createElement("option");
        ele.innerHTML=i;
        pro_ele.appendChild(ele);
    }

    pro_ele.onchange=function (){
        console.log(this.selectedIndex);
        console.log(this.options[this.selectedIndex])

        var citys=data[this.options[this.selectedIndex].innerHTML];
        //补充知识：data["河北省"]与data.河北省等同

        city_ele.options.length=1;

        for(var i=0;i<citys.length;i++){
            var ele=document.createElement("option");
            ele.innerHTML=citys[i];
            city_ele.appendChild(ele);
        }
    }

</script>

</body>
</html>

原文地址:https://blog.csdn.net/weixin_42830015/article/details/139610949 本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：https://www.suanlizi.com/kf/1800909430741667840.html 如若内容造成侵权/违法违规/事实不符，请联系《酸梨子》网邮箱：1419361763@qq.com进行投诉反馈，一经查实，立即删除！

阅读全部