密码的password和text切换

效果演示：

 

代码演示：

css：

 <style>
        .box{
            position: relative;
            width: 400px;
            border-bottom: 1px solid #ccc;
            margin: 100px auto;
        }
        .box input{
            width: 300px;
            height: 30px;
            border: 0;
            outline: none;
            padding-left: 20px;
        }
        .box img{
            position: absolute;
            top: 2px;
            right: 2px;
            width: 24px;
        }
    </style>

html:

  <div class="box">
        <label>
            <img src="./img/eye1.png" alt="" id="eye">
        </label>
            密码:<input type="password" id="pwd">
    </div>

js:

<script>
    let _eye = document.getElementById('eye');
    let _pwd = document.getElementById('pwd');
    var count = 0;
    _eye.onclick = function(){
        if(count == 0){
            _pwd.type = 'text';
            _eye.src = "./img/eye2.png";
            count = 1;
        }else{
            _pwd.type = 'password';
            _eye.src = "./img/eye1.png";
            count = 0;
        }
    }
</script>