js点击密码框旁的图标可自由切换密码框和文本框

点击密码框旁的图标可自由切换密码框和文本框

<div class="box">
        <input type="password" id="pwd">
        <label for="pwd">
            <img src="images/close.png" id="eye">
        </label>

    </div>
    <script>
        //当我点击图片时，密码框就变成文本框，再点击又变回密码框，且图片也会发生睁眼闭眼的变化
        //获取事件源
        var pwd = document.querySelector('#pwd');
        var eye = document.querySelector('#eye');
        //绑定事件
        var flag = true;//设置flag看睁眼闭眼
        eye.onclick = function () {
            //修改表单属性
            if (flag == true) {
                pwd.type = 'text';
                eye.src = 'images/open.png';
                flag = false;
            } else {
                pwd.type = 'password';
                eye.src = 'images/close.png';
                flag = true;
            }
        }
    </script>