1,js文本框密码的显示与隐藏

//简单页面结构
<div class="box">
        <label for="">
            <img src="./images/close.png" alt="">
        </label>
        <input type="password">
</div>

//js实现
<script>
        // 1,核心思路  :点击眼睛按钮 ,把密码框类型改为文本框就可以看见里面的密码 
        // 2,一个按钮 :  俩个状态,点击一次,切换为文本框,继续点击一次切换为密码框
        // 3,算法  利用一个flag变量,来判断flag 的值  如果是true就切换为文本框,
        //  flag设置为false, 如果是false就切换为密码框,flag设置为true
          

        // 获取元素
        var eye = document.querySelector("img");
        var pwd = document.querySelector("input");
        
        var flag = 0;
        // 点击事件
        eye.onclick = function () {
            if (flag == 0) {
                pwd.type = 'text';
                eye.src = './images/open.png'
                flag = 1;
            } else {
                pwd.type = 'password';
                eye.src = './images/close.png'
                flag = 0;
            }
        }
</script>

<style>
        .box {
            position: relative;
            width: 400px;
            border: 1px solid #ccc;
            margin: 100px auto;
        }

        .box img {
            position: absolute;
            top: -5px;
            right: 2px;
            width: 24px;
        }

        .box input {
            width: 370px;
            outline: none;
            border: 0;
        }
    </style>