显示隐藏密码明文

显示隐藏密码明文

1. 核心思路

1.点击眼睛按钮,把密码框类型变为文本框就可以看见里面的密码
2.一个按钮两个状态,点击一次,切换为文本框,再点击一次,切换为密码框
3.算法:利用一个flag变量,来判断flag的值,如果是1,就切换为文本框,flag设置为0;如果是0,就切换为密码框,flag设置为1;

2. 代码

    <title>显示隐藏密码明文</title>
    <style>
        .box{
            width: 400px;
            border-bottom: 1px solid #ccc;
            margin: 100px auto;
            position: relative;
        }
        .box input{
            width: 370px;
            height: 30px;
            border: 0;
            outline: none;
        }
        .box img{
            width: 50px;
            position: absolute;
            top: -12px;
            right: -1px;

        }
    </style>
</head>
<body>
<div class="box">
    <label for="">
        <img src="img/close.jpg" alt="" id="eye">
    </label>
    <input type="password" name="" id="pwd">
</div>
<script>
    //1.获取元素
    let eye=document.getElementById("eye");
    let pwd=document.getElementById("pwd");
    //2.注册事件  处理程序
    let flag=0;
    eye.onclick=function () {
        if(flag==0){
            pwd.type="text";
            eye.src="img/open.jpg"
            flag=1;
        }else{
            pwd.type="password";
            eye.src="img/close.jpg"
            flag=0;
        }
    }
</script>

你可能感兴趣的:(js)