分时提醒小案例+密码案例+广告开启关闭案例-CSDN博客

本文链接：https://blog.csdn.net/tonysxiaobao/article/details/126457040

1、分时提醒案例

<!DOCTYPE html>
<html lang="en">
<meta charset="utf-8">
<style>
    img {
        width: 300px;
    }
</style>

<head>
</head>

<body>
    <img src="img/s.gif" alt="">
    <div>上午好</div>
    <script>
        var img = document.querySelector('img');
        var div = document.querySelector('div');
        var date = new Date();
        var h = date.getHours();
        if (h < 12) {
            img.src = 'img/s.gif';
            div.innerHTML = '上午好';

        } else if (h < 18) {
            img.src = 'img/x.gif';
            div.innerHTML = '下午好';
        } else {
            img.src = 'img/w.gif';
            div.innerHTML = '晚上好';
        }
    </script>
</body>

</html>

2、密码案例

<!DOCTYPE html>
<html lang="en">
<meta charset="utf-8">
<style>
    * {
        padding: 0px;
        margin: 0px;
    }

    .ipt {
        width: 200px;
        margin: auto;
        position: relative;
    }

    .ipt input {

        height: 35px;
        line-height: 35px;
        border: 1px solid #999;
        margin: auto;
        display: block;
        width: 100%;
    }

    .ipt i {
        display: block;
        width: 20px;
        height: 20px;
        right: 6px;
        top: 7px;
        /* background-color: pink; */
        position: absolute;
        cursor:pointer;
        /* background: url(img/闭眼睛.png) no-repeat; */
        /* background-size: cover; */
    }

    .open {
        background: url(img/闭眼睛.png) no-repeat ;
        background-size: cover;
    }

    .close {
        background: url(img/眼睛.png) no-repeat ;
        background-size: cover;
    }
</style>

<head>
</head>

<body>
    <div class="ipt">
        <input type="password" id="password" >
        <i class="open" id="eye">

        </i>
    </div>
    <script>
        var eye = document.getElementById("eye");
        var password = document.getElementById("password");
        var flag=false;


        eye.onclick = function () {
          flag=!flag;
          if(flag){
            password.type="text";
            eye.className="close";
          }else{
            password.type="password";
            eye.className="open";
          }
            

        }
    </script>
</body>

</html>

3、广告开启关闭案例

<!DOCTYPE html>
<html lang="en">
<meta charset="utf-8">
<style>
    .box {
        position: relative;
        width: 300px;
        height: 300px;
        border: 1px solid #ccc;
        margin: 100px auto;
        font-size: 12px;
        text-align: center;
        color: #f40;

    }

    .box img {
        height: 250px;
        width: 250px;
        margin-top: 5px;
    }

    .close-btn {
        display: block;
        width: 60px;
        height: 30px;
        margin: 0 auto;
        border: 1px solid #ccc;
        line-height: 30px;
        font-family: Arial, Helvetica, sans-serif;
        cursor: pointer;
        text-align: center;

    }
</style>

<head>
</head>

<body>
    <i class="close-btn">关闭</i>
    <div class="box">
        <p>广告</p>
        <img src="img/1.png" alt="">
    </div>

    <script>
        var btn = document.querySelector('.close-btn');
        var box = document.querySelector('.box');
        var flag = 0;
        btn.onclick = function () {
            if (flag ==0) {
                box.style.display = 'none';
                flag = 1;
                btn.innerHTML='打开';
            } else {
                box.style.display = 'block';
                flag = 0;
                btn.innerHTML='关闭';
            }


        }

    </script>

</body>


</html>