密码框显示案例

需求：点击眼睛图案可以来回切换密码与文本显示 html代码

 <div class="box">
        <label for="">
            <i class="iconfont icon-biyan" id="eye"></i>
        </label>
        <input type="password" name="" id="psd">
    </div>

css代码

.box {
            position: relative;
            width: 400px;
            border-bottom: 1px solid #cccc;
            margin: 100px auto;
        }

        .box input {
            width: 380px;
            height: 30px;
            border: 0;
            outline: none;
            /*去除密码框输入时显示的蓝色边框*/
        }

        .box i {
            width: 24px;
            position: absolute;
            top: 10px;
            right: 0px;
        }

js代码

 //1.获取元素
        var eye = document.getElementById('eye');
        var psd = document.getElementById('psd');
        //2.注册事件  处理程序
        var flag = 0;
        eye.onclick = function () {
            //利用flag变量，来判断flag的值，如果是1切换为文本框，是0的话切换为密码框 
            //点击一次后flag一定要变化
            if (flag == 0) {
                psd.type = 'text'; //将password属性改为text
                this.className = 'iconfont icon-yanjing-zhengyan';
                flag = 1;    //重新赋值
            } else {
                psd.type = 'password';
                this.className = 'iconfont icon-biyan';
                flag = 0;
            }


        }

效果图：