学习DOM第一天——案例（用户名显示隐藏内容、关闭广告、下拉菜单、开关灯）

第一天学习了怎样获取页面元素、事件、操作元素。实践才是检验真理的唯一标准，学习完内容之后，让我们做一些练习来加强一下我们今天学习的内容。

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>
    <input type="text" value="交友">
    <script>
        //1、获取元素
        var ipt = document.querySelector('input');
        //2、注册事件 选中
        ipt.onfocus = function() {
                if (this.value === '交友') {
                    this.value = '';
                }
                this.style.color = '#333';
            }
            //注册事件  未选中
        ipt.onblur = function() {
            if (this.value === '') {
                this.value = '交友';
            }
            this.style.color = '#999';
        }
    </script>

</body>

</html>

2、关闭广告

当点击完×号之后，所显示的广告图片会消失。

<!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>
        .box {
            position: relative;
            width: 74px;
            height: 88px;
            border: 1px solid #ccc;
            margin: 100px auto;
            font-size: 12px;
            text-align: center;
            color: #f40;
        }
        
        .guanggao {
            width: 74px;
            height: 88px;
            /* margin-top: 5px; */
            background: pink;
        }
        
        .close-btn {
            position: absolute;
            top: -1px;
            left: -16px;
            width: 14px;
            height: 14px;
            border: 1px solid #ccc;
            line-height: 14px;
            font-family: Arial, Helvetica, sans-serif;
            cursor: pointer;
        }
    </style>
</head>

<body>
    <div class="box">
        <div class="guanggao">

        </div>
        <i class="close-btn">×</i>
    </div>
    <script>
        //1、获取元素
        var btn = document.querySelector('.close-btn');
        var box = document.querySelector('.box');
        //2、处理事件
        btn.onclick = function() {
            box.style.display = 'none';
        }
    </script>
</body>

</html>

3、下拉菜单

当鼠标经过某一菜单时，会显示当前菜单下的子菜单内容，不经过时不会弹出显示。

<!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>
</head>
<style>
    * {
        margin: 0;
        padding: 0;
        list-style: none;
    }
    
    div {
        width: 400px;
        margin: 100px auto;
    }
    
    div 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: #ccc;
    }
    
    a:hover {
        background: pink;
    }
    
    ul ul {
        display: none;
    }
</style>

<body>
    <div id='nav'>
        <ul>
            <li id="li1"><a href=#>菜单</a></li>
            <ul id='ul1'>
                <li><a href=#>电器</a></li>
                <li><a href=#>手机</a></li>
                <li><a href=#>电脑</a></li>
            </ul>
        </ul>
    </div>

    <script>
        //1、获取元素
        var myli = document.getElementById('li1');
        var myul = document.getElementById('ul1');
        //2、注册事件
        myli.onmouseover = function() {
            myul.style.display = 'block';
        }
        myli.onmouseout = function() {
            myul.style.display = 'none';
        }
    </script>
</body>

</html>

4、开关灯案例

当点击开关按钮，屏幕显示会变化颜色，从而达到类似于开关灯的效果。

<!DOCTYPE html>
<html lang="en">

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

<body>
    <button id="btn">开关灯</button>
    <script>
        //1、获取元素
        var btn = document.getElementById('btn');
        var flag = 0;
        //2、注册事件 处理程序
        btn.onclick = function() {
            if (flag == 0) {
                document.body.style.backgroundColor = 'black';
                flag = 1;
            } else {
                document.body.style.backgroundColor = '#fff';
                flag = 0;
            }
        }
    </script>
</body>

</html>

原文链接：https://blog.csdn.net/qq_46186155/article/details/105519804