0515JS事件、函数、操作document对象、练习

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
            *{
                margin: 0 auto;
                padding: 0;
            }
            body{
                transition: 1s;
            }
            #first{
                width: 100px;
                height: 60px;
                background-color:#00008B;
                border-radius: 5px;
                text-align: center;
                line-height: 60px;
                font-size: 22px;
                color: white;
            }
            #first:hover{
                cursor: pointer;
            }
            #second{
                width: 160px;
                height: 60px;
                text-align: center;
                line-height: 60px;
                font-size: 15px;
            }
            #a1{
                width: 100px;
                height: 60px;
                background-color:#00008B;
                border-radius: 5px;
                margin-top: 20px;
                text-align: center;
                line-height: 60px;
                font-size: 22px;
                display: none;
                color: white;
            }
            #second:hover{
                cursor: pointer;
            }
            #third{
                width: 700px;
                height: 100px;
                background-color: #00008B;
                margin-top: 100px;
                border-radius: 10px;
                text-align: center;
                line-height: 100px;
                color: white;
            }
            #third:hover{
                cursor: pointer;
            }
            .four{
                width: 100px;
                height: 60px;
                background-color:#00008B;
                border-radius: 5px;
                margin-top: 80px;
                margin-left: 500px;
                text-align: center;
                line-height: 60px;
                font-size: 22px;
                color: white;
                float: left;
            }
            .fifth{
                width: 100px;
                height: 60px;
                background-color:#00008B;
                border-radius: 5px;
                margin-top: 80px;
                margin-left: 500px;
                text-align: center;
                line-height: 60px;
                font-size: 22px;
                color: white;
                float: left;
            }
            .fifth:hover{
                cursor: pointer;
            }
        </style>
    </head>
    <body>
        <div id="first" onclick="first()">
            按钮
        </div>
        <div id="second">
            <input type="checkbox" name="" id="" value="" onmousemove="second()"/>鼠标经过出现按钮
        </div>
        <div id="a1">
            点我
        </div>
        <div id="third">
            鼠标经过这个div变高变色，移除再恢复
        </div>
        <div class="four" onclick="four1()">
            按钮
        </div>
        <div class="four" onclick="four2()" style="margin-left: 80px;">
            按钮
        </div>
        <div class="fifth" onclick="fifth()">
            按钮
        </div>
        <div class="fifth" onclick="fifth()" style="margin-left: 40px;display: none;">
            按钮
        </div>
    </body>
</html>
<script type="text/javascript">
    function first(){
        alert("弹出窗口");
    }
    var second = document.getElementById("second");
    second.onmouseover = function(){
        var second1 = document.getElementById("a1");
        second1.style.display = "block";
    }
    second.onmouseout = function(){
        var second1 = document.getElementById("a1");
        second1.style.display = "none";
    }
    var third = document.getElementById("third");
    third.onmouseover = function(){
        third.style.height = "200px";
        third.style.backgroundColor = "red";
        third.style.transition = "3s";
    }
    var third = document.getElementById("third");
    third.onmouseout = function(){
        third.style.height = "100px";
        third.style.backgroundColor = "#00008B";
    }
    function four1(){
        var four3 = document.getElementsByTagName("body")[0];
        four3.style.backgroundColor = "darkmagenta";
        four3.style.transition = "1s";
    }
    function four2(){
        var four3 = document.getElementsByTagName("body")[0];
        four3.style.backgroundColor = "#C69500";
        four3.style.transition = "1s";
    }
    var fifth1 = document.getElementsByClassName("fifth")[1];
    var fifth2 = fifth1.style.display;
    function fifth(){
        if(fifth2 == "none"){
            fifth1.style.display = "block";
            fifth2 = "block";
        }else{
            fifth1.style.display = "none";
            fifth2 = "none";
        }
    }
</script>
0515JS事件、函数、操作document对象、练习

猜你喜欢
