利用js点击小眼睛图片实现转换明文暗码的效果

明文暗码:实际上就是密码框和文本框的切换.
看到别人输入密码的时候 旁边有个小眼睛,点击后就可以把密码显示出来了,再点击又隐藏了,所以今天自己也简单的做一下.发现还是很简单就完成这个案例了.
HTML和css代码块

<style>
    .box{
        position: relative;
        width: 300px;
        height: 200px;
        border: 1px solid #ccc;
        text-align: center;
        line-height: 30px;
        margin: 100px auto;;
    }
    input{
        margin-top: 20px;
        margin-left: 20px;
        width: 200px;
    }
    img{
        position:absolute;
        top: 100px;
        left: 262px;
        width: 15px;
        height: 12px;
        opacity: 0.6;
    }
</style>
**html 代码**
<div class="box">
        <p>
            账 号<input type="text" value="">
        </p>
        <p>
            密  码<input type="password" id="pwd">
            <img src="close.jpg" alt="" id = "eye">
        </p>
        <button id="btn1">重置</button>
        <button id="btn2">确定</button>
    </div>

js模块

   <script>
        var eye = document.getElementById("eye");
        var pwd = document.getElementById("pwd");
   
        //这里要做一个简单的算法,如果是1就变成文本框,如果是0就变成密码框.
        var a = 0;
        eye.onclick =function(){
            //点击后改变成文本框,再点击就变回密码框.
            if( a == 0 ){
                pwd.type = "text";
                eye.src = "open.jpg";
                a = 1;
            }else{
                pwd.type = "password";
                eye.src = "close.jpg";
                a = 0;
            }
        }

    </script>

成果图
小眼睛是两个小图片可以换成自己喜欢的.