根据时间不同、显示不同的问候语和图片

<body>
    <img src="https://img1.baidu.com/it/u=321038443,1107527631&fm=253&fmt=auto&app=138&f=JPEG?w=667&h=500" alt="">
    <div>上午好</div>
    <script>
        //根据系统不同时间来判断、所以需要用到日期内置对象
        //利用多分支语句来设置不同的图片
        //需要一个图片，并且根据时间修改图片，就需要用到操作元素src属性
        //需要一个div元素，显示不同问候语，修改元素内容即可

        //1、获取元素
        var img = document.querySelector('img');
        var div = document.querySelector('div');

        //2、得到当前小时数
        var date = new Date();
        var h = date.getHours(); 

        //3、判断小时数来改变图片
        if (h < 12) {
            img.src = 'https://img1.baidu.com/it/u=321038443,1107527631&fm=253&fmt=auto&app=138&f=JPEG?w=667&h=500';
            div.textContent = '亲，上午好'
        } else if (h < 18) {
            img.src = 'https://img2.baidu.com/it/u=1674938477,4251829997&fm=253&fmt=auto&app=138&f=GIF?w=481&h=383';
            div.textContent = '亲，下午好'
        } else {
            img.src = 'https://img0.baidu.com/it/u=1431576814,188891959&fm=253&fmt=auto&app=138&f=GIF?w=240&h=240';
            div.textContent = '亲，晚上好'
        }
    </script>
</body>

密码框切换明文


    <style>
        *{
            margin: 0px;
            padding: 0px;
        }
        div{
            width:500px;
            height:100px;
        }
        input{
            border: none;
            outline: none;
            float: left;
            border-bottom:1px solid #ccc;
            width:400px;
            height: 99px;
        }
        button{
            float: left;
            width: 100px;
            height:99px;
        }
        img{
            width:100%;
            height: 100%;
        }
    </style>
<body>
    <div class="box">
        <input type="text" name="" id="ipt">
        <button id="btn"><img src="D:\catherine\study\images\JS\images\eye1.png" id="img" alt=""></button>
    </div>

    <script>
        var ipt=document.getElementById("ipt");
        var img=document.getElementById("img");
        var btn=document.getElementById("btn");
        var flag = 0;
        btn.onclick=function(){
            if(ipt.type=="text"){
                img.src="./闭眼睛.png";
                ipt.type="password";
                flag == 0;
            }
            else{
                img.src="./眼睛.png"
                ipt.type="text"
                flag == 1;
            }
        }
    </script>

关闭二维码

<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>
        .close img {
            float: left;
            width: 30px;
            height: 30px;
        }

        .close img:hover {
            cursor: pointer;
        }

        .qr-code {
            float: left;
            width: 50px;
            height: 50px;
        }
    </style>
</head>
<body>
    <div class="box">
        <div class="close">
            <img src="images\close.png" alt="" id="close">
        </div>
        <div class="qr-code">
            <img src="images\二维码.png" alt="">
        </div>
    </div>

    <script>
        var close = document.getElementById('close');
        var box = document.querySelector('.box');

        close.onclick = function () {
            box.style.display = 'none'
        }
    </script>

显示隐藏文本框内容

<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>
        var text = document.querySelector('input');

        text.onfocus = function () {
            if (this.value === "手机") {
                this.value = ' ';
            }
        }

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

DOM案例整理

根据时间不同、显示不同的问候语和图片

密码框切换明文

关闭二维码

显示隐藏文本框内容