一、事件、函數、變量、判斷

時間 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>
相關標籤/搜索
每日一句
每一个你不满意的现在，都有一个你没有努力的曾经。