一、事件、函数、变量、判断

时间 2019-12-04
标签事件函数变量判断繁體版
原文原文链接
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>一、事件、函数、变量、判断</title>
    <link href="base.css">
    <style>
        li{
            padding-bottom: 50px;
        }

        .btn{
            width: 80px;
            height: 44px;
            border-radius: 6px;
            border: none;
            background-color: blue;
            color: white;
            font-size: 16px;
        }

        #btn1{
            width: 80px;
            height: 44px;
            border-radius: 6px;
            border: none;
            background-color: blue;
            color: white;
            font-size: 16px;
            display: none;
        }

        #aBlock{
            width:400px;
            height:100px;
            border:1px solid #ccc;
        }

        #aBlock1{
            display: none;
            width:160px;
            height:50px;
            border:1px solid #ccc;
            text-align: center;
            line-height: 50px;
            margin-top: 5px;
        }

        #btn2{
            display: none;
            width:160px;
            height:50px;
            border:1px solid #ccc;
            text-align: center;
            line-height: 50px;
            margin-top: 5px;
        }

        #yangshi1{
            width: 80px;
            height: 44px;
            border-radius: 6px;
            border: none;
            background-color: blue;
            color: white;
            font-size: 16px;
        }

        #yangshi2{
             width: 80px;
             height: 44px;
             border-radius: 6px;
             border: none;
             background-color: blue;
             color: white;
             font-size: 16px;
         }

        #xy{
            width: 80px;
            height: 44px;
            border-radius: 6px;
            border: none;
            background-color: blue;
            color: white;
            font-size: 16px;
        }

        #xyRed{
            display: none;
            width: 80px;
            height: 44px;
            border-radius: 6px;
            border: none;
            background-color: red;
            color: white;
            font-size: 16px;
        }

    </style>
</head>
<body>
<ol>
    <!--一、说明事件-->
    <li>说明事件
    <input type="button" value="按钮"  class="btn" onclick="alert('弹出窗口')">
    </li>
    
    <!--二、移入移出-->
    <li>移入移出
    <div onmouseover="mOver()" onmouseout="mOut()" style="display: inline">
    <input type="radio" class="radio1">鼠标通过出现按钮
    <input type="button" value="按钮"  id="btn1">
    </div>
    </li>

    <!--三、函数 鼠标通过这个div执行变窄变高变色 移出再恢复-->
    <li>
       <div id="aBlock" onmouseover="show()" onmouseout="back()">鼠标通过这个div执行变窄变高变色，移出再恢复</div>
    </li>

    <!--四、鼠标通过就弹出层(函数、变量)-->
    <li>
        <div onmouseover="show1()" onmouseout="back1()">鼠标通过就弹出层</div>
        <div id="aBlock1">这是弹出的层</div>
    </li>

    <!--五、鼠标点击就弹出层(函数、变量、判断)-->
    <li>
        <div onclick="dianji()">鼠标点击就弹出层</div>
        <div id="btn2">这是弹出的层</div>
    </li>

    <!--六、网页换肤-->
    <li>网页换肤
        <input type="button" value="样式1" id="yangshi1" onclick="yang1()">
        <input type="button" value="样式2" id="yangshi2" onclick="yang2()">
    </li>

    <!--七、显示隐藏-->
    <li>显示隐藏
        <input type="button" value="显示隐藏" id="xy" onclick="xy1()">
        <input type="button" value="显示隐藏" id="xyRed">
    </li>



</ol>

<script>
    /*二、移入移出*/
    function mOver()
    {
        var a=document.getElementById("btn1");
        a.style.display="block";
    }

    function mOut()
    {
        var a=document.getElementById("btn1");
        a.style.display="none";
    }
    /*二、移入移出end*/

    /*三、函数 鼠标通过这个div执行变窄变高变色 移出再恢复*/
    function show()
    {
        var a=document.getElementById("aBlock");
        a.style.background="red";
        a.style.height="200px";
        a.style.color="white";
    }

    function back()
    {
        var a=document.getElementById("aBlock");
        a.style.background="white";
        a.style.height="100px";
        a.style.color="black";
    }
    /*三、函数 鼠标通过这个div执行变窄变高变色 移出再恢复end*/

    /*四、鼠标通过就弹出层(函数、变量)*/
    function show1()
    {
        var a=document.getElementById("aBlock1");
        a.style.display="block";
    }

    function back1()
    {
        var a=document.getElementById("aBlock1");
        a.style.display="none";
    }
    /*四、鼠标通过就弹出层(函数、变量)end*/


    /*五、鼠标点击就弹出层(函数、变量、判断)*/
    function dianji()
    {
        var a=document.getElementById("btn2");
        if(a.style.display=="block"){
            a.style.display="none"
        }else{
            a.style.display="block"
        }
    }
    /*五、鼠标点击就弹出层(函数、变量、判断)end*/

    /*六、网页换肤*/
    function yang1(){
        var a=document.getElementById("yangshi1");
        document.body.style.backgroundColor="red";
    }
    function yang2(){
        var a=document.getElementById("yangshi2");
        document.body.style.backgroundColor="yellow";
    }
    /*六、网页换肤end*/

    /*七、显示隐藏*/
    function xy1(){
        var a=document.getElementById("xyRed");
        if(a.style.display=="block"){
            a.style.display='none';
        }else{
            a.style.display='block';
        }
    }
    /*七、显示隐藏end*/
</script>

</body>
</html>