0517JS综合练习挂事件练习

Posted 2020-11-06 mjwwzy
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了0517JS综合练习挂事件练习相关的知识，希望对你有一定的参考价值。
<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
            *{
                margin: 0 auto;
                padding: 0;
            }
            .a{
                width: 200px;
                height: 80px;
                text-align: center;
                line-height: 80px;
                background-color: red;
                color: white;
            }
            ul{
                list-style: none;
                overflow: hidden;
            }
            li{
                width: 180px;
                height: 40px;
                text-align: center;
                line-height: 40px;
                color: blue;
                background-color: #008000;
            }
            #di2{
                width: 800px;
                height: 300px;
                text-align: center;
                line-height: 40px;
                margin-top: 50px;
                border: 1px solid red;
            }
            .di21{
                width: 198px;
                height: 300px;
                text-align: center;
                line-height: 40px;
                border: 1px solid red;
                float: left;
            }
            .di22{
                width: 198px;
                height: 220px;
                text-align: center;
                line-height: 40px;
                border: 1px solid red;
                float: left;
            }
            .c{
                width: 200px;
                height: 80px;
                text-align: center;
                line-height: 80px;
                float: left;
                background-color: red;
            }
            #di3{
                width: 400px;
                height: 80px;
                border: 1px solid red;
            }
            .d31{
                width: 100px;
                height: 80px;
                float: left;
                text-align: center;
                line-height: 80px;
            }
            #e1{
                width: 450px;
                height: 400px;
                border: 1px solid red;
                text-align: center;
                line-height: 80px;
                display: block;
            }
            #e2{
                width: 450px;
                height: 400px;
                border: 1px solid red;
                text-align: center;
                line-height: 80px;
                display: none;
            }
            #e3{
                width: 450px;
                height: 400px;
                border: 1px solid red;
                text-align: center;
                line-height: 80px;
                display: none;
            }
            #e4{
                width: 450px;
                height: 400px;
                border: 1px solid red;
                text-align: center;
                line-height: 80px;
                display: none;
            }
            #f1{
                width: 400px;
                height: 5px;
                border: 1px solid #6610F2;
                margin-top: 100px;
            }
            #ff{
                width: 0px;
                height: 5px;
                background-color: red;
                float: left;
                transition: 5s;
            }
            #h1{
                width: 200px;
                height: 100px;
                border: 1px solid red;
                text-align: center;
                line-height: 80px;
                color: black;
            }
            .h11{
                width: 100px;
                height: 40px;
                text-align: center;
                line-height: 40px;
                background-color: red;
                color: black;
                float: left;
            }
            .h12{
                width: 100px;
                height: 20px;
                text-align: center;
                line-height: 20px;
                background-color: blue;
                color: black;
                float: left;
            }
        </style>
    </head>
    <body>
        <div class="a" onclick="a(‘a1‘)">标题1</div>
            <ul id="a1" style="height: 0px;">
                <li>内容1</li>
                <li>内容2</li>
                <li>内容3</li>
            </ul>
        
        <div class="a" onclick="a(‘a2‘)">标题2</div>
            <ul id="a2"  style="height: 0px;">
                <li>内容1</li>
                <li>内容2</li>
                <li>内容3</li>
            </ul>
        
        <div class="a" onclick="a(‘a3‘)">标题3</div>
            <ul id="a3"  style="height: 0px;">
                <li>内容1</li>
                <li>内容2</li>
                <li>内容3</li>
            </ul>
            
            
            
        <div id="di2">
            <div class="di21">
                <div class="c" onmousemove="c(‘c1‘)">标题</div>
                <div class="di22">
                    <ul id="c1"  style="height: 0px;">
                    <li>内容1</li>
                    <li>内容2</li>
                    <li>内容3</li>
                    </ul>
                </div>
                
            </div>
            <div class="di21">
                <div class="c" onmousemove="c(‘c2‘)">标题</div>
                <div class="di22">
                    <ul id="c2"  style="height: 0px;">
                    <li>内容1</li>
                    <li>内容2</li>
                    <li>内容3</li>
                    </ul>
                </div>
                
            </div>
            <div class="di21">
                <div class="c" onmousemove="c(‘c3‘)">标题</div>
                <div class="di22">
                    <ul id="c3"  style="height: 0px;">
                    <li>内容1</li>
                    <li>内容2</li>
                    <li>内容3</li>
                    </ul>
                </div>
                
            </div>
            <div class="di21">
                <div class="c" onmousemove="c(‘c4‘)">标题</div>
                <div class="di22">
                    <ul id="c4"  style="height: 0px;">
                    <li>内容1</li>
                    <li>内容2</li>
                    <li>内容3</li>
                    </ul>
                </div>
                
            </div>
            
        </div>
        <div id="di3">
            <div class="d31" style="background-color: blue;" onclick="dd(‘e1‘)">
                国际新闻
            </div>
            <div class="d31" style="background-color: #17A2B8;" onclick="dd(‘e2‘)">
                国内新闻
            </div>
            <div class="d31" style="background-color: #721C24;" onclick="dd(‘e3‘)">
                体育新闻
            </div>
            <div class="d31" style="background-color: #C69500;" onclick="dd(‘e4‘)">
                娱乐新闻
            </div>
        </div>
        <div id="e1" style="background-color: blue;" name="ee">
            国际新闻
        </div>
        <div id="e2" style="background-color: #17A2B8;" name="ee">
            国内新闻
        </div>
        <div id="e3" style="background-color: #721C24;" name="ee">
            体育新闻
        </div>
        <div id="e4" style="background-color: #C69500;" name="ee">
            娱乐新闻
        </div>
        
        
        
        <div id="f1">
            <div id="ff"></div>
        </div>
        
        <div id="h1">
            <div class="h11">标题
                <div class="h12">内容</div>
                <div class="h12">内容</div>
                <div class="h12">内容</div>
            </div>
            <div class="h11">标题
                <div class="h12">内容</div>
                <div class="h12">内容</div>
                <div class="h12">内容</div>
            </div>
        </div>
    </body>
</html>
<script type="text/javascript">
    /*function a(x){
        var sj1 = document.getElementsByTagName("ul");
        var sj0 = document.getElementById(x);      //x如果加引号变成字符串
        if(sj0.style.height == "0px"){
            for(var i = 0;i<sj1.length;i++){
                sj1[i].style.height = "0px";
            }
            sj0.style.transition = "1s";
            sj0.style.height = "120px";
        }else{
            sj0.style.height = "0px";
        }
    }*/
    
    
    function c(z){
        var sj2 = document.getElementsByTagName("ul");
        var sj3 = document.getElementById(z);
        if(sj3.style.height == "0px"){
            for(var ii = 0;ii<sj2.length;ii++){
                sj2[ii].style.height = "0px";
            }
            sj3.style.transition = "1s";
            sj3.style.height = "120px";
        }else{
            sj3.style.height = "0px";
        }
    }
    
    
    function dd(f){
        var sj4 = document.getElementById(f);
        var sj5 = document.getElementsByName("ee")
            for(var i = 0;i<sj5.length;i++){
                sj5[i].style.display = "none";
            }
            sj4.style.transition = "1s";
            sj4.style.display = "block";
    }
    
    
    setTimeout("tt()",2000)
    function tt(){
        document.querySelector("#ff").style.width = "400px";
    }
    
    
    
</script>
以上是关于0517JS综合练习挂事件练习的主要内容，如果未能解决你的问题，请参考以下文章
挂事件综合练习
react 表单 demo 代码练习
JS-结合html综合练习js的对象——班级成绩表制作
0511JS综合练习
HTML+CSS+JS综合练习（动态验证版）
jquery综合练习--模态对话框传值,删除,新增表格行