学习DOM的第一天练习案例：用户的显示和隐藏关闭广告下拉菜单开关灯

小熊宇航员372

已于 2022-10-23 16:24:40 修改

阅读量190

点赞数

文章标签：学习 javascript 前端 visual studio html

于 2022-10-19 21:40:57 首次发布

本文链接：https://blog.csdn.net/weixin_68022678/article/details/127416388

版权

1.用户的显示和隐藏关闭

通过事件三部曲来

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

    <style>
        input{
            color:#999;
        }   
    </style>
</head>
<body>
    <div class="box">
        <input type="text" value="邮箱/ID/手机号">
    </div>

    <script>
        var text=document.querySelector('input');
        text.onfocus=function(){
            this.value='';
            text.style.color='#333';
            this.style.borderColor='pink';

        }
        text.onblur=function(){
            this.value='邮箱/ID/手机号';
            this.style.color='#999';
        }
    </script>
</body>
</html>

2.关闭广告

点击X时图片消失，改写X的内容

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        img{
            position: absolute;
            width: 200px;
            height: 200px;
        }
        .bit{
            position: relative;
            left: 202px;
        }
    </style>
</head>
<body>
    <img src="../images/yhx.jpg" alt="">
    <i class="bit">X</i>
    <script>
        var img =document.querySelector('img');
        var bit =document.querySelector('.bit');
        bit.onclick = function(){
            img.style.display='none';
            bit.innerHTML='';
        }
    </script>
</body>
</html>

3.新浪下拉菜单

先把第二个ul隐藏 display ：none ；然后再点击的时候display： block;

再次点击变为none;

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>下拉菜单</title>
    <style>
       *{
        margin: 0%;
        padding: 0%;
        list-style: none;
       }
       .nav{
        width: 400px;
        margin: 100px auto;

       }
       .nav ul li{
        float: left;
        width: 100px;
        height: 30px;
        line-height: 30px;
        text-align: center;
       }
       a{
        text-decoration: none;
        color: #fff;
        display: block;
        width: 100px;
        height: 30px;
        background-color: #ccc;
       }
       a.hover{
        background: pink;
       }
       ul  ul{
        display: none;
       }
      
    </style>
</head>
<body>
    
    <div class="nav">
       <ul>
        <li class="li1"><a href="#">微博</a></li>
        <ul class="ul1">
        <li ><a href="#">私信</a></li>
        <li ><a href="#">评论</a></li>
        <li ><a href="#">@我</a></li>
       </ul>
       </ul>
    </div>
    <script>    
    var myli1=document.querySelector('.li1');
    var myul1=document.querySelector('.ul1');
    myli1.onmouseover =function(){
        myul1.style.display='block';
    }
    myli1.onmouseout =function(){
        myul1.style.display='none';
    }
    </script>
</body>
</html>

3.1 通过父子结点来设计下拉菜单

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width= , initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        .box{
            text-align: center;
            overflow: hidden;
            margin-top: 100px;
            margin-left: 600px;
        }
        a{
            text-decoration: none;
            color: #000;
        }
        ul{
            list-style: none;
        }
        .box>li{
            float: left;
            list-style: none;
            
            padding: 10px;
        }
        .box>li>a:hover{
            background-color: #eee;
        }
        .box ul{
            display: none;
            line-height: 20px;
            border-left: 1px solid #fecc5b;
            border-right: 1px solid #fecc5b;
        }
        .box ul li{
            border-bottom: 1px solid #fecc5b;
         
        }
        .box ul li:hover{
            background-color: yellow;
        }
    </style>
</head>
<body>
    <div class="box">
        <li><a href="#">微博</a>
        <ul>
            <li><a href="#">私信</a></li>
            <li><a href="#">评论</a></li>
            <li><a href="#">@我</a></li>
        </ul>
        </li>
       <li><a href="#">微博</a>
        <ul>
            <li><a href="#">私信</a></li>
            <li><a href="#">评论</a></li>
            <li><a href="#">@我</a></li>
        </ul>
      </li>
      <li><a href="#">微博</a>
        <ul>
            <li><a href="#">私信</a></li>
            <li><a href="#">评论</a></li>
            <li><a href="#">@我</a></li>
        </ul>
        </li>
    </div>
    <script>
        var box = document.querySelector('.box');
        var lis = box.children;
        for(var i=0;i<lis.length;i++){
            lis[i].onmouseover=function(){
                this.children[1].style.display='block';
            }
            lis[i].onmouseout=function(){
                this.children[1].style.display='none';
            }
        }
    </script>
</body>
</html>

4.开关灯

知道body整个身体部分调用以及颜色的更改 document.body.style.backgroundColor

关键点。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
  
</head>
<body>
   
    <button id="kgd">开灯</button>
  
     <script>
        var box=document.querySelector('box');
        var input=document.body;
        kgd.onclick=function(){
            if(this.innerHTML=='开灯'){
            this.innerHTML='关灯';
            document.body.style.backgroundColor='black';
        }
        else{
            this.innerHTML='关灯';
            document.body.style.backgroundColor='#fff';
        }
    }
     </script>
</body>
</html>