javascript--DOM对象实例集合

骑猪看日落 2022-08-23 09:58 180阅读 0赞

在HTML中添加3个对象
    1.按钮 显示
    2.按钮 隐藏
    3.DIV
    当点击显示时候
    div显示
    当点击隐藏
    div隐藏
    
    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>div显示隐藏</title>
        <style>
            #con{
                background-color:deeppink;
                width:300px;
                height:200px;
            }
        </style>
    </head>
    <body>
    <input type="button" value="显示" id="show">
    <input type="button" value="隐藏" id="noshow"><br/>
    <div id="con"></div>
    <script>
        var show=document.getElementById("con");
        document.getElementById("show").onclick=function(){
            show.style.display="block";
        }
        document.getElementById("noshow").onclick=function(){
            show.style.display="none";
        }
    </script>
    </body>
    </html>
    
    作业二：
      实现一个Tab选项卡的效果
      点击不同的，内容进行切换
      
      <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>选项卡</title>
        <style type="text/css">
            body {
                margin: 0;
                padding: 0;
            }
    
            .nav ul {
                list-style: none;
                margin: 0;
                padding: 0;
            }
    
            .nav ul li {
                float: left;
                width: 100px;
                height: 50px;
                border: 1px solid #8a6263;
                line-height: 50px;
                background: #78c3b5;
                text-align: center;
                cursor: pointer;
                color: #fff;
            }
    
            .nav ul li a {
                text-decoration: none;
            }
            .nav ul li.navNow{
                color: #333;
                background:#e1c987;
            }
    
            .navshow div {
                clear: both;
                width: 508px;
                height: 200px;
                border: 1px solid #7b5255;
                display: none;
            }
    
        </style>
    </head>
    <body>
    <div class="nav" id="nav">
        <ul>
            <li onclick="fun('0')" class="navNow">首页</li>
            <li onclick="fun('1')">关于我们</li>
            <li onclick="fun('2')">新闻中心</li>
            <li onclick="fun('3')">通知公告</li>
            <li onclick="fun('4')">联系我们</li>
        </ul>
    </div>
    <div class="navshow" id="navshow">
        <div style="display: block">首页：内容</div>
        <div>关于我们：内容</div>
        <div>新闻中心：内容</div>
        <div>通知公告：内容</div>
        <div>联系我们：内容</div>
    </div>
    
    <script>
        //获取整个li，getElementsByTagName为数组
        var nav = document.getElementById("nav").getElementsByTagName("li");
        var navshow=document.getElementById("navshow").getElementsByTagName("div");
        function fun(num) {
            for (var n = 0; n < nav.length; n++) {
                nav[n].style.color="white";
                nav[n].style.background="#78c3b5";
            }
            nav[num].style.color="#333";
            nav[num].style.background="#e1c987";
    
            //查询所有的div
            for(var n=0;n<navshow.length;n++){
                navshow[n].style.display="none";
            }
            navshow[num].style.display="block";
        }
    
    </script>
    </body>
    </html>
    
    作业三：
    ——列表的不断扩展 
    在一个页面中显示一个列表
    显示20个列表条目
    在列表条目下面增加
        列表条目 加载更多
      点击加载更多以后
        列表再增加20个条目
        
    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>加载更多</title>
        <style type="text/css">
            h1{
                color: #333;
                width: 100%;
                text-align: center;
            }
            ul{
                margin: 0;
                padding:0;
                width:100%;
                text-align: center;
            }
            ul li{
               width: 100%;
                height: 50px;
                border: 1px solid #7b5255;
                background: #78c3b5;
                line-height: 50px;
                list-style: none;
            }
        </style>
    </head>
    <body>
    <h1>手机站加载更多</h1>
    <div class="nav" >
        <ul id="nav">
            
            
            
            
        </ul>
    </div>
    <script>
        var nav = document.getElementById("nav");
        for (var n = 0; n < 10; n++) {
            var li=document.createElement("li");
            li.innerHTML="菜单"+n;
            nav.appendChild(li);
        }
        //添加“加载更多”li
        var more=document.createElement("li");
        more.innerHTML="加载更多";
        nav.appendChild(more);
        //更多添加点击方法
        more.onclick=function(){
            //从ul中移除
            nav.removeChild(more);
            //继续从n开始,所以重新定义
            for (var m = 0; m < 10; m++) {
                var li=document.createElement("li");
                li.innerHTML="菜单"+n;
                nav.appendChild(li);
                n++;
            }
            //重新在最底部添加上li的“加载更多”
            nav.appendChild(more);
        }
    </script>
    </body>
    </html>
    
    作业四：
       将菜品列表和tab选项卡合并
      实现一个手机微信的效果，将加载更多放到列表的上方
      
      <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>选项卡+加载更多</title>
        <style type="text/css">
            body {
                margin: 0;
                padding: 0;
            }
    
            .nav ul {
                list-style: none;
                margin: 0;
                padding: 0;
            }
    
            .nav ul li {
                float: left;
                width: 100px;
                height: 50px;
                border: 1px solid #8a6263;
                line-height: 50px;
                background: #78c3b5;
                text-align: center;
                cursor: pointer;
                color: #fff;
            }
    
            .nav ul li a {
                text-decoration: none;
            }
            .nav ul li.navNow{
                color: #333;
                background:#e1c987;
            }
    
            .navshow div {
                clear: both;
                width: 508px;
                border: 1px solid #7b5255;
                display: none;
            }
    
            h1{
                color: #333;
                width: 100%;
                text-align: center;
            }
            .ullist ul{
                margin: 0;
                padding:0;
                width:100%;
                text-align: center;
            }
            .ullist ul li{
                width: 100%;
                height: 50px;
                border: 1px solid #7b5255;
                background: #78c3b5;
                line-height: 50px;
                list-style: none;
            }
    
        </style>
    </head>
    <body>
    <div class="nav" id="nav">
        <ul>
            <li onclick="fun('0')" class="navNow">首页</li>
            <li onclick="fun('1')">关于我们</li>
            <li onclick="fun('2')">新闻中心</li>
            <li onclick="fun('3')">通知公告</li>
            <li onclick="fun('4')">联系我们</li>
        </ul>
    </div>
    <div class="navshow" id="navshow">
        <div style="display: block">首页：内容</div>
        <div>关于我们：内容</div>
        <div>新闻中心：内容</div>
        <div>通知公告：内容</div>
        <div class="ullist">
            <h1>手机站加载更多</h1>
            <ul  id="ul">
    
            </ul>
        </div>
    </div>
    
    <script>
        //获取整个li，getElementsByTagName为数组
        var nav = document.getElementById("nav").getElementsByTagName("li");
        var navshow=document.getElementById("navshow").getElementsByTagName("div");
        function fun(num) {
            for (var n = 0; n < nav.length; n++) {
                nav[n].style.color="white";
                nav[n].style.background="#78c3b5";
            }
            nav[num].style.color="#333";
            nav[num].style.background="#e1c987";
    
            //查询所有的div
            for(var n=0;n<navshow.length;n++){
                navshow[n].style.display="none";
            }
            navshow[num].style.display="block";
        }
    
        var ul = document.getElementById("ul");
        for (var n = 0; n < 10; n++) {
            var li=document.createElement("li");
            li.innerHTML="菜单"+n;
            ul.appendChild(li);
        }
        //添加“加载更多”li
        var more=document.createElement("li");
        more.innerHTML="加载更多";
        ul.appendChild(more);
        //更多添加点击方法
        more.onclick=function(){
            //从ul中移除
            ul.removeChild(more);
            //继续从n开始,所以重新定义
            for (var m = 0; m < 10; m++) {
                var li=document.createElement("li");
                li.innerHTML="菜单"+n;
                ul.appendChild(li);
                n++;
            }
            //重新在最底部添加上li的“加载更多”
            ul.appendChild(more);
        }
    </script>
    </body>
    </html>
    
    作业五：
    淘宝搜索选项卡
    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>淘宝搜索框</title>
        <style>
            ul{
                margin: 0;
                padding: 0;
                float: left;
                width: 150px;
                list-style: none;
            }
            ul li{
                float: left;
                width: 50px;
                height: 25px;
                text-align: center;
                line-height: 25px;
                cursor: pointer;
                font-size: 13px;
                color: #FF5400;
            }
            .navNow{
                color:#fff;
                background: #FF5400;
            }
            .navshow div{
                clear: both;
                display: none;
            }
            input{
                height: 34px;
                width: 347px;
                border: 2px solid #FF5400;
            }
        </style>
    </head>
    <body>
    <div class="nav">
        <ul id="nav">
            <li onclick="fun('0')" class="navNow">宝贝</li>
            <li onclick="fun('1')">天猫</li>
            <li onclick="fun('2')">店铺</li>
    
        </ul>
    </div>
    
    <div class="navshow" id="navshow">
        <div style="display: block;"><input type="text" value="  宝贝"></div>
        <div><input type="text" value="  天猫" ></div>
        <div><input type="text" value="  店铺"></div>
    </div>
    <script>
        //
        var nav=document.getElementById("nav").getElementsByTagName("li");
        var navshow=document.getElementById("navshow").getElementsByTagName("div");
        function fun(num) {
            for (var n=0;n<nav.length;n++) {
                nav[n].style.color="#FF5400";
                nav[n].style.background="#fff";
            }
                nav[num].style.color = "#fff";
                nav[num].style.background = "#FF5400";
    
    
            for(var n=0;n<navshow.length;n++){
                navshow[n].style.display="none";
            }
            navshow[num].style.display="block";
        }
    </script>
    </body>
    </html>