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

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
            *{
                margin: 0px auto;
                padding: 0px;
            }
            .qcfu{
                clear: both;
            }
            /*<div class="qcfu"></div>*/
            body{
                transition: 1s;
            }
            #sjone{
                width: 80px;
                height: 50px;
                background: darkblue;
                margin-top: 20px;
                border-radius: 10px;
                line-height: 50px;
                text-align: center;
                color: white;
            }
            #sjone:hover{
                cursor: pointer;
            }
            #sjtwo{
                width: 150px;
                height: 20px;
                margin-top: 20px;
            }
            #sjtwo:hover{
                cursor: pointer;
                }
            #sjtwo_1{
                width: 200px;
                height: 50px;
                background: darkblue;
                margin-top: 20px;
                border-radius: 10px;
                line-height: 50px;
                text-align: center;
                color: white;
                display: none;
            }
            #sjthree{
                width: 1000px;
                height: 100px;
                background: gray;
                margin-top: 60px;
                border-radius: 10px;
                line-height: 100px;
                text-align: center;
                color: white;
            }
            #sjthree:hover{
                cursor: pointer;
                }
            .sjfour{
                width: 80px;
                height: 50px;
                background: darkblue;
                margin-top: 20px;
                border-radius: 10px;
                line-height: 50px;
                text-align: center;
                color: white;
                float: left;
                margin-left: 600px;
            }
            .sjfour:hover{
                cursor: pointer;
                }
            .sjfive{
                width: 80px;
                height: 50px;
                background: darkblue;
                margin-top: 20px;
                border-radius: 10px;
                line-height: 50px;
                text-align: center;
                color: white;
                float: left;
                margin-left: 600px;
            }
            .sjfive:hover{
                cursor: pointer;
                }
        </style>
    </head>
    <body>
        <div id="sjone" onclick="sjone()">按钮
            
        </div>
        <div id="sjtwo">
            <input type="checkbox" name="" id="" value="" />鼠标经过出现按钮
        </div>
        <div id="sjtwo_1">你点不到我，哈哈
            
        </div>
        <div id="sjthree">鼠标经过这个div变高变色，移除再恢复
            
        </div>
        <div class="sjfour" onclick="sjfour_a()">按钮
            
        </div>
        <div class="sjfour" onclick="sjfour_b()" style="margin-left: 10px;">按钮
            
        </div>
        <div class="qcfu"></div>
        <div class="sjfive" style="display: block;" onclick="sjfive()">按钮
            
        </div>
        <div class="sjfive" style="position: absolute; left: 90px; display: none;" onclick="sjfive_1()">按钮
            
        </div>
    </body>
</html>
<script type="text/javascript">
    function sjone(){
        alert("弹出窗口");
    }
    var sjtwo = document.getElementById("sjtwo");
    sjtwo.onmouseover = function(){
        var sjone_a = document.getElementById("sjtwo_1");
        sjone_a.style.display = "block";
        console.log(sjone_a);
    }
    sjtwo.onmouseout = function(){
        var sjone_a = document.getElementById("sjtwo_1");
        sjone_a.style.display = "none";
        console.log(sjone_a);
    }
    var sjthree = document.getElementById("sjthree");
    sjthree.onmouseover = function(){
        sjthree.style.height = "200px";
        sjthree.style.width = "500px";
        sjthree.style.backgroundColor = "blue";
        sjthree.style.transition = "1s";
    }
    sjthree.onmouseout = function(){
        sjthree.style.height = "100px";
        sjthree.style.width = "1000px";
        sjthree.style.backgroundColor = "gray";
    }
    function sjfour_a(){
        var sjfour_x = document.getElementsByTagName("body")[0];
        sjfour_x.style.backgroundColor = "navajowhite";
        sjfour_x.style.trasition = "1s";
    }
    function sjfour_b(){
        var sjfour_x = document.getElementsByTagName("body")[0];
        sjfour_x.style.backgroundColor = "cadetblue";
        sjfour_x.style.transition = "1s";
    }
    var sjfive_a = document.getElementsByClassName("sjfive")[1];
        function sjfive(){
            var sjfive_b = sjfive_a.style.display;
            if (sjfive_b == "none") {
                sjfive_a.style.display = "block";
                sjfive_a.innerHTML = "<<别点它";
                sjfive_1a.innerHTML = "别点它>>";
            } else{
                sjfive_a.style.display = "none";
                sjfive_1a.innerHTML = "点我";
            }
        }
    var sjfive_1a = document.getElementsByClassName("sjfive")[0];
        function sjfive_1(){
            var sjfive_1b = sjfive_1a.style.display;
            if (sjfive_1b == "none") {
                sjfive_1a.style.display = "block";
                sjfive_a.innerHTML = "<<别点它";
            } else{
                sjfive_1a.style.display = "none";
                sjfive_a.innerHTML = "点我";
            }
        }
</script>
posted @ 2018-05-15 11:48 359950470 阅读(108) 评论(0) 收藏举报
刷新页面返回顶部
0515JS练习：事件、函数、操作document对象

公告
