密码显示js

今天我们写一个密码隐藏和点击看见的代码

首先我们先把css样式写出来

 <style>
        .box{
            width: 400px;
            border-bottom: 1px solid #333;
            margin: 100px auto;
            position: relative;
        }
        .box input{
            width: 370px;
            height: 30px;
            border: 0;
            outline: none;
        }
        .box img{
            width: 40px;
            height: 24px;
            position: absolute;
            top: 2px;
            right: 2px;
        }

 <div class="box">
        <label for="">
            <img src="./imges/biyan.png" alt="" id="eye">
        </label>
        <input type="password" name="" id="pwd">
    </div>

然后我们我们开始写js的样式

  <script>
        //获取元素
        var eye = document.getElementById("eye");
        var pwd = document.getElementById("pwd");
        //注册事件 处理程序
        var flag = 0;
        eye.onclick = function(){
           if (flag==0) {
            pwd.type = "text";  //把密码框改成文本框
            eye.src = "./imges/zhengyan.png"; //切换图片
            flag=1;  // 把flag 重新赋值
           }else{
            pwd.type = "password";  //把文本框改成密码框
            eye.src  = "./imges/biyan.png";
            flag=0;   // 把flag 重新赋值
           } 
        }

这样我们就把这个写完了