登录框练习

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        *{
            margin:0;
        }
        /*div3展现的时候它展现*/
        #div1{
            position: fixed;
            width: 2000px;
            height: 1000px;
            background-color: darkgray;
            z-index: 2;
            opacity:0.6;
        }
        /*刚开始展现它*/
        #div2{
            position: fixed;
            width:2000px;
            height: 1000px;
            background-color: green;
            z-index: 1;

        }
        /*登陆的窗口*/
        #div3{
            position: absolute;
            width: 480px;
            height: 280px;
            background-color: red;
            z-index: 3;
            margin-top:200px;
            margin-left:450px;

        }
        .hide{
            display: none;
        }
    </style>
</head>
<body>
<div id="div1" class="div hide"></div>
<div id="div2">
    <input type="button" value="right" onclick="right()">
</div>
<div id="div3" class=" div hide">
    <input type="button" value="cancle" onclick="cancle()">
</div>
<script>
    function right() {
        var ele=document.getElementsByClassName("div")
        for(var i=0;i<ele.length;i++){
            ele[i].classList.remove("hide")
        }
    }
    function cancle() {
        var ele=document.getElementsByClassName("div")
           for(var i=0;i<ele.length;i++){
            ele[i].classList.add("hide")
        }

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