JS 作业

Posted 2020-10-31 韩凯
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了JS 作业相关的知识，希望对你有一定的参考价值。
<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>作业</title>
        <style type="text/css">
            *{
                margin: 0 auto;
                padding: 0;
            }
            #tc{
                width: 100px;
                height: 30px;
            }
            
            
            #taozi{
                width:100px;
                height: 70px;
                border: 1px solid transparent;
                text-align: center;
                line-height: 70px;
            }
            #taozi1{
                width: 150px;
                height: 70px;
                border: 1px solid transparent;
                text-align: center;
                line-height: 70px;
            }
            #xsys{
                width: 150px;
                height: 70px;
                background-color: cornflowerblue;
                color: white;
                border-radius: 10px;
                text-align: center;
                line-height: 70px;
                display: none;
            }
            .three{
                width: 1000px;
                height: 30px;
                color: blue;
                transition: 2s;
            }
            .four{
                width: 700px;
                height: 300px;
                color: white;
                background-color: red;
                transition: 2s;
            }
            #waiceng{
                width: 1350px;
                background-color: lightblue;
                overflow: hidden;
            }
            .neiceng{
                width: 1000px;
                height: 100px;
                background-color: white;
                margin-top: 30px;
                box-shadow: 1px 5px gray;
                border: 1px solid lightgray;
               
            }
            #wangyehuanfu{
                width: 300px;
                height: 50px;
            }
            #yangshi1{
                width: 76px;
                height: 45px;
                color: white;
                background-color: blue;
                text-align: center;
                line-height: 45px;
                float: left;
                border-radius: 15px;
            }
            #yangshi2{
                width: 76px;
                height: 45px;
                color: white;
                background-color: blue;
                text-align: center;
                line-height: 45px;
                float: left;
                margin-left: 30px;
                border-radius: 15px;
            }
            #topan{
                border-radius: 15px;
                width: 76px;
                height: 45px;
                color: white;
                background-color: blue;
                text-align: center;
                line-height: 45px;
            }
            #bottoman{
                border-radius: 15px;
                width: 76px;
                height: 45px;
                color: white;
                background-color: green;
                text-align: center;
                line-height: 45px;
                display: none;
            }
            .anceng{
                width: 800px;
                height: 100px;
                border-right: 5px solid darkcyan;
                position: absolute;
                margin: 0 0;
                z-index: -1;
            }
            .mingceng{
                width: 800px;
                height: 100px;
                position: absolute;
                margin: 0 0;
                z-index: 1;
            }
            .ganceng{
                width: 1000px;
                height: 100px;
                position: absolute;
                box-shadow: 0px 10px darkgray;
                margin: 0 0;
                z-index: -1;
            }
         </style>
</head>
     <body>
         <div id="waiceng">
                 
     <div class="neiceng">
         1 说明事件
       <div id="tc" onclick="tanchu()">
                      按钮
        </div>
        </div>
        
        <div class="neiceng">
            2 鼠标移入下面显示按钮
        <div id="taozi"onmousemove="xianshi()" onmouseout="xiaoshi()">
        <div id="taozi1"><input type="button" value="&nbsp &nbsp"/>鼠标经过显示按钮</div>    
        <div id="xsys" >
                 按钮
        </div>
        </div>
        </div>
        
        <div class="neiceng" style="height:300px ;">
            <div class="three" onmousemove="zg()" onmouseout="ka()">3 鼠标经过变窄变高，移出再恢复</div>
        </div>
        
        <div class="neiceng">
            <div class="mingceng" onmouseover="cxac()" >
                4 鼠标经过就弹出层（函数、变量）
            </div>
            <div class="anceng" onmouseout="cxmc()">
                4 鼠标经过就弹出层（函数、变量）
            </div>
        </div>
        
        <div class="neiceng">
            <div class="mingceng"  onclick="dtc1()">
                5 鼠标点击就弹出层（函数、变量、判断）
            </div>
            <div class="ganceng"  onclick="dtc2()" >
                5 鼠标点击就弹出层（函数、变量、判断）
            </div>
        </div>
        
        <div class="neiceng">
        6 网页换肤
        <div id="wangyehuanfu">
            <div id="yangshi1" onclick="ys1()">样式1</div>
            <div id="yangshi2" onclick="ys2()">样式2</div>
        </div>
        </div>
        
        <div class="neiceng">
        7 显示隐藏
         <div id="topan" onclick="xsyc()">显示隐藏</div>
         <div id="bottoman">显示隐藏</div>
         </div> 
    </div>
    </body>
</html>

<script type="text/javascript">
    window.onload=function(){
        
    }
    function tanchu(){
        alert("弹出窗口");
    }
    function xianshi(){
        document.getElementById("xsys").style.display = "block";
        document.getElementById("taozi1").style.display="none";
    }
    function xiaoshi(){
        document.getElementById("xsys").style.display = "none";
        document.getElementById("taozi1").style.display="block";
    }
    function zg(){
        var zg = document.getElementsByClassName("three");
        zg[0].className = "four";
    }
    function ka(){
        var ka = document.getElementsByClassName("four");
        ka[0].className = "three";
    }
    function ys1(){
        document.getElementById("waiceng").style.backgroundColor = "yellowgreen"
    }
    function ys2(){
        document.getElementById("waiceng").style.backgroundColor = "grey"
    }
    function xsyc(){
          if(document.getElementById("bottoman").style.display == "none"){
              document.getElementById("bottoman").style.display = "block"
          }else{
              document.getElementById("bottoman").style.display = "none"
          }
    }
    function cxac(){
        document.getElementsByClassName("anceng")[0].style.zIndex = "10"
        document.getElementsByClassName("mingceng")[0].style.zIndex = "-1"
    }
    function cxmc(){
        document.getElementsByClassName("anceng")[0].style.zIndex = "-1"
        document.getElementsByClassName("mingceng")[0].style.zIndex = "10"
    }
    function dtc1(){
        document.getElementsByClassName("ganceng")[0].style.zIndex = "10"
        document.getElementsByClassName("mingceng")[1].style.zIndex = "-1"
    }
    function dtc2(){
        document.getElementsByClassName("ganceng")[0].style.zIndex = "-1"
        document.getElementsByClassName("mingceng")[1].style.zIndex = "10"
    }
</script>
以上是关于JS 作业的主要内容，如果未能解决你的问题，请参考以下文章
HTML5期末大作业：餐饮美食网站设计——咖啡(10页) HTML+CSS+JavaScript 学生DW网页设计作业成品 web课程设计网页规划与设计咖啡网页设计美食餐饮网页设计...(代码片段
VSCode自定义代码片段——JS中的面向对象编程
VSCode自定义代码片段9——JS中的面向对象编程
js代码片段: utils/lcoalStorage/cookie
JS代码片段：一个日期离现在多久了
js常用代码片段(更新中)