DOM ------ 仿京东显示隐藏密码

仿京东显示隐藏密码

完成效果如下:

	//css代码
	.box {
        position: relative; //大盒子 相对定位
        width: 400px;
        border-bottom: 1px solid #ccc;
        margin: 100px auto;
    }
    .box input {
        width: 370px;
        height: 30px;
        border:0;  //input框的边框隐去
        outline:none;
    }
    .box img {
        position: absolute;  //小盒子 绝对定位
        top: 10px;
        right: 10px;
        width:24px
    }
    //html代码
    <div class='box'>
        <label for="">
            <img src="../Picture/不可见.png" alt="" id="eye">
        </label>
        <input type="password" id="pwd">
    </div>
    //js代码
    	// 1.获取元素
        var eye = document.getElementById('eye')
        var pwd = document.getElementById('pwd')
        // 2.注册事件 处理程序
        var flag = 0  //定义一个标记,初始值为0
        eye.onclick = function() {
            // 点击一次之后,flag值会变化
            if(flag == 0){
                pwd.type = 'text'  //修改input框内容类型为text
                eye.src = '../Picture/可见.png'
                flag = 1  //修改标记
            } else {
                pwd.type = 'password'  //修改input框内容类型为password
                eye.src = '../Picture/不可见.png'
                flag = 0  //修改标记
            }  
        }

注: 小图标可以从阿里矢量图标 icon 中免费获取.