1. 程式人生 > >5,17練習題二

5,17練習題二

() ima adding CA isp 鼠標 splay 彈出 gree

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <style type="text/css">
        *{
            margin: 0px auto;
            padding: 0px;
        }
        
        #anniu{
            width:100px;
            height: 80px;
            text
-align: center; line-height: 80px; background-color: blue; } #anniu2{ width:100px; height: 80px; text-align: center; line-height: 80px; background-color: blue; } #anniu3{ width:100px; height: 80px; text
-align: center; line-height: 80px; background-color: blue; } #anniu4{ width:100px; height: 80px; text-align: center; line-height: 80px; background-color: blue; display: none; } #continer{ width:
100%; height: 200px; background-color: red; } #anniu5{ width:100px; height: 80px; text-align: center; line-height: 80px; background-color: blue; } #anniu6{ width:100px; height: 80px; text-align: center; line-height: 80px; background-color: blue; display: none; float:left; } </style> <body> <div id="anniu" onclick="tanChuang()">按鈕</div> <input type="button" name="" id="anniu2" value="按鈕" onclick="tanChuang()"/> <button id=anniu3 onclick="tanChuang()">按鈕</button> <br /> <br /> <label onmouseover="xianshi()" onmouseout="yincang()"><input type="checkbox" />鼠標經過出現按鈕</label> <button id="anniu4">按鈕</button> <br /> <br /> <div id="continer" onmouseover="yiRu()" onmouseout="yichu()">鼠標經過這個div變高變色,移出再恢復</div> <div id="anniu3" onclick="change1()">顏色1 </div> <br /> <br /> <div id="anniu3" onclick="change2()">顏色2 </div> <br /> <br /> <br /> <br /> <button id="anniu5" onclick="showhide()">按鈕1</button> <button id="anniu6" onclick="showhide()">按鈕2</button> </body> </html> <script type="text/javascript"> function tanChuang() { alert("彈出窗口"); } function xianshi(){ var div1 =document.getElementById("anniu4"); div1.style.display="block"; } function yincang(){ var div1 =document.getElementById("anniu4"); div1.style.display="none"; } function yiRu(){ var div2=document.getElementById("continer"); div2.style.width = "80%"; div2.style.height = "400px"; div2.style.backgroundColor ="green" } function yichu(){ var div2=document.getElementById("continer"); div2.style.width = "100%"; div2.style.height = "200px"; div2.style.backgroundColor ="red " } function change1(){ var bodycolor=document.body; bodycolor.style.backgroundColor="red"; } function change2(){ var bodycolor=document.body; bodycolor.style.backgroundColor="green"; } function showhide(){ var showhide = document .getElementById("anniu6").style.display; if(showhide==‘none‘){ document .getElementById("anniu6").style.display="block"; }else{ document .getElementById("anniu6").style.display="none"; } } </script>

技術分享圖片

5,17練習題二