JS实例

模态对话框

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .content{
            height: 1111px;
            background-color: #a42099;
        }
        .shade{
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background-color: gray;
            opacity: 0.3;
        }
        .module1{
            height: 233px;
            width: 233px;
            background-color: #75a49c;
            position: absolute;
            top: 40%;
            left: 40%;
        }
        .hide{
            display:none;

        }
    </style>

</head>
<body>

<div class="content">
    <button class="btn" onclick="f()">show</button>
</div>
<div class="shade hide"></div>
<div class="module1 hide">
    <button class="btn2" onclick="back()">取消</button>
</div>

<script>
    function f() {
        var ele1 =document.getElementsByClassName("hide")
        var ele2 =document.getElementsByClassName("hide")
        ele1[0].classList.remove("hide")
        ele2[0].classList.remove("hide")
    }
    function back() {
        var ele1 =document.getElementsByClassName("shade")[0]
        var ele2 =document.getElementsByClassName("module1")[0]
        ele1.classList.add("hide")
        ele2.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>取消</button>
<button onclick="fan()">反选</button>
<table border="1px">
    <tr>
        <td><input type="checkbox"></td>
        <td>1111</td>
        <td>1111</td>
        <td>1111</td>
    </tr>
    <tr>
        <td><input type="checkbox"></td>
        <td>2</td>
        <td>2</td>
        <td>2</td>
    </tr>
    <tr>
        <td><input type="checkbox" ></td>
        <td>3</td>
        <td>31</td>
        <td>3</td>
    </tr>

</table>

<script>
    function selectALL() {
        var eles = document.getElementsByTagName("input");
        console.log(eles)
        for (var i=0;i<3;i++)
        {
            console.log(eles[i])
            eles[i].checked=true
        }
    }
    function fan() {
        var eles = document.getElementsByTagName("input");
        for (var i=0;i<3;i++){
            if (eles[i].checked)
                eles[i].checked=false
            else
                eles[i].checked=true
        }
    }
</script>

</body>
</html>

 

二级联动

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

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

</select>

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

<script>
    data={
        "河北省":["石家庄","廊坊"],"山西省":["晋城","大同"]
    }
    var pro_ele = document.getElementById("province");
    var city_ele = document.getElementById("citys");
    for (var i in data){
        var op = document.createElement("option")
        op.innerText=i
        console.log(i)
        pro_ele.appendChild(op)
    }

    pro_ele.onchange=function () {
       // this.selectedIndex 获取选中标签的索引
       //  this.options 获取所有option标签
        city_ele.options.length=1;  //每次进来清空option，并留下请选择
        citys = data[this.value]

        for (var i in citys){
            op = document.createElement("option")
            op.innerText=citys[i]
            city_ele.appendChild(op)
        }


    }

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

 

posted @ 2018-06-26 14:43  Python少年  阅读(234)  评论(0)  编辑  收藏  举报