js实现密码输入框点击小眼睛显示或隐藏密码

登录页密码框加密输入不知道对错，加个小眼睛方便查看和修改，下面是小眼睛效果图，如果不喜欢这个图标可以自己去阿里图标库自己选择下载。

一个输入框小眼睛显示或隐藏：

html代码（因为只把密码输入框展示出来了，所以样式自行调整，只给你们展示功能代码）

<div class="login_ipt">
    <input class="pwd" id="pwd" type="password" placeholder="请输入密码">
    <img class="eye" id="eye" src="./images/eye.png" alt="">
</div>

 js代码

// 1.获取元素
var eye = document.getElementById('eye');
var pwd = document.getElementById('pwd');
// 2.注册事件 处理程序
var flag = 0;
eye.onclick = function () {
    // 点击一次之后，flag一定要变化
    if (flag == 0) {
        pwd.type = 'text';
        eye.src = './images/eye_active.png';
        flag = 1; //赋值操作
    } else {
        pwd.type = 'password';
        eye.src = './images/eye.png';
        flag = 0;
    }
}

多个输入框小眼睛显示或隐藏：

HTML 

<div class="cont">
    <input id="pwd0" type="password" placeholder="请输入原密码">
    <img id="eye0" src="./images/eye.png" alt="" onclick="showPwd()">
</div>
<div class="cont">
    <input id="pwd1" type="password" placeholder="请输入新密码">
    <img id="eye1" src="./images/eye.png" alt="" onclick="showPwd()">
</div>
<div class="cont">
    <input id="pwd2" type="password" placeholder="请确认新密码">
    <img id="eye2" src="./images/eye.png" alt="" onclick="showPwd()">
</div>

JS

 function showPwd() {
            var index = event.target.id.substr(-1);//取出id（eye0）最后的数字
            if ($("#pwd"+index).attr("type") == "text") {
                $("#pwd"+index).attr("type", "password");
                $("#eye"+index).attr("src", "./images/eye.png");
            }
            else {
                $("#pwd"+index).attr("type", "text");
                $("#eye"+index).attr("src", "./images/eye_a.png");
            }
}